@extends('index')

@section('main')
    <main id="main" class="bgWhite">
        <div class="home-slider-container">
            <div class="home-slider home-slider-owl owl-carousel">
                <div class="home-slider__item">
                    <div class="home-slider__img">
                        @php($file = new FileModel(['path' => $page->extra_i18n->top->image[0]->path ?? '', 'data' => $page->extra_i18n->top->image[0]->data ?? '']))
                        <img src="{{ !empty($file->path) ? $file->adaptive(1920, 840) : 'assets/img/slide-100e.jpg' }}" alt="{{ $file->data->name ?? 'AngelSounds' }}" class="home-slider__img-desktop">
                        @php($file = new FileModel(['path' => $page->extra_i18n->top->image_mobile[0]->path ?? '', 'data' => $page->extra_i18n->top->image_mobile[0]->data ?? '']))
                        <img src="{{ !empty($file->path) ? $file->adaptive(1000, 750) : 'assets/img/placeholder-100e-100x750.jpg' }}" alt="{{ $file->data->name ?? 'AngelSounds' }}" class="home-slider__img-mobile">
                    </div>
                    <div class="home-slider__inner">
                        <div class="home-slider__body">
                            <div class="home-slider__title-over">{!! nl2br($page->extra_i18n->top->small_header ?? '') !!}</div>
                            <div class="home-slider__title">
                                <h1 class="home-slider__title">{!! nl2br($page->extra_i18n->top->h1 ?? '') !!}</h1> {!! nl2br($page->extra_i18n->top->header ?? '') !!}
                            </div>
                            <p class="home-slider__text">{!! nl2br($page->extra_i18n->top->text ?? '') !!}</p>
                            <div class="home-slider__action">
                                @if(!empty($page->extra_i18n->top->left->button) && !empty($page->extra_i18n->top->left->url))
                                    <a href="{{ $page->extra_i18n->top->left->url }}" class="btn btn-primary btn-primary--uppercase">{{ $page->extra_i18n->top->left->button }}</a>
                                @endif
                                @if(!empty($page->extra_i18n->top->right->button) && !empty($page->extra_i18n->top->right->url))
                                    <a href="{{ $page->extra_i18n->top->right->url }}" class="btn btn-primary btn-primary--link">{!! $page->extra_i18n->top->right->button !!}</a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if(!empty($page->extra_i18n->products->items))
            <div class="products-list products-list--home overflow-h">
                <div class="row-flex gutter-6">
                    @foreach($page->extra_i18n->products->items as $item)
                        <div class="col-md-6">
                            @php($file = new FileModel(['path' => $item->image[0]->path ?? '', 'data' => $item->image[0]->data ?? '']))
                            <div class="product-teaser" style="background-image: url('{{ !empty($file->path) ? $file->adaptive(950, 550) : 'assets/img/mini-950x550.png' }}');">
                                <div class="product-teaser__body">
                                    <div class="product-teaser__img">
                                        @php($file = new FileModel(['path' => $item->image_mobile[0]->path ?? '', 'data' => $item->image_mobile[0]->data ?? '']))
                                        <img src="{{ !empty($file->path) ? $file->adaptive(1000, 500) : 'assets/img/mini-1000x500.png' }}" alt="{{ $file->data->name ?? '' }}">
                                    </div>
                                    <!--<div class="product-teaser__extra"><span class="product-teaser__label">z aplikacją</span> <i class="ico icoApple"></i> <i class="ico icoAndroid"></i></div>-->
                                    <div class="product-teaser__title-over">{!! $item->model ?? '' !!}</div>
                                    <div class="product-teaser__title">{!! $item->name ?? '' !!} <span class="product-teaser__title--pink"><strong>{!! $item->type ?? '' !!}</strong></span></div>
                                    <p class="product-teaser__text">{!! $item->text ?? '' !!}</p>
                                    @if(!empty($item->text) && !empty($item->url))
                                        <div class="product-teaser__actions">
                                            <a href="{{ $item->url }}" class="btn btn-primary btn-primary--uppercase">{{ $item->button }}</a>
                                            <!--<a href="detektor-tetna-plodu-angelsounds-smart" class="btn btn-primary btn-secondary--link">Dowiedz się więcej</a>-->
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
        @if(!empty($page->extra_i18n->gift->show))
            <div class="text-img text-img--grey text-img--overflow text-img--home">
                <div class="container">
                    <div class="row-flex">
                        <div class="col-lg-5 col-sm-6">
                            <div class="text-img__inner text-img__inner--big">
                                <div class="text-img__logo">
                                    <img src="assets/img/angelsounds.png" alt="AngelSounds">
                                </div>
                                <div class="text-img__title text-img__title--big">{!! nl2br($page->extra_i18n->gift->header ?? '') !!}</div>
                                <div class="text-img__body text-img__body--big">
                                    <p>{!! nl2br($page->extra_i18n->gift->text ?? '') !!}</p>
                                    @if(!empty($page->extra_i18n->gift->button) && !empty($page->extra_i18n->gift->url))
                                        <p>
                                            <a href="{{ $page->extra_i18n->gift->url }}" class="btn btn-primary btn-primary--outline">{!! $page->extra_i18n->gift->button !!}</a>
                                        </p>
                                    @endif
                                </div>
                                <figure class="text-img__img text-img__img--home text-img__img--right text-img__img--bottom text-img__img--fill">
                                    @php($file = new FileModel(['path' => $page->extra_i18n->gift->image[0]->path ?? '', 'data' => $page->extra_i18n->gift->image[0]->data ?? '']))
                                    <img src="{{ !empty($file->path) ? $file->adaptive(644, 740) : 'assets/img/img-home-1.png' }}" alt="">
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @if(!empty($page->extra_i18n->gallery->images))
            <div class="overflow-h">
                <div class="img-fullwidth img-fullwidth--six">
                    <div class="row-flex gutter-4">
                        @foreach($page->extra_i18n->gallery->images as $image)
                            @php($file = new FileModel(['path' => $image->path ?? '', 'data' => $image->data ?? '']))
                            <div class="col-sm-2">
                                <img src="{{ $file->adaptive(477, 477) }}">
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
        @if($opinions->isNotEmpty())
        <div class="home-opinions">
            <div class="container">
                <div class="opinions-slider owl-carousel">
                    @foreach ($opinions as $opinion)
                        <div class="opinions-slide__item">
                            <div class="opinion opinion--center" 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>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
        @if(!empty($page->extra_i18n->icons->items))
            <div class="home-pink-circles">
                <div class="container">
                    <div class="pink-circles">
                        <h2 class="product__title product__title--center">{!! nl2br($page->extra_i18n->icons->header ?? '') !!}</h2>
                        <div class="row-flex">
                            @foreach($page->extra_i18n->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>
                </div>
            </div>
        @endif
        @if(!empty($page->extra_i18n->icons->button) && !empty($page->extra_i18n->icons->url))
            <div class="home-buy-now">
                <div class="container">
                    <div class="buy-now">
                        <a href="{{ $page->extra_i18n->icons->url }}" class="btn btn-primary btn-primary--uppercase">{!! $page->extra_i18n->icons->button !!}</a>
                    </div>
                </div>
            </div>
        @endif
    </main>
    <section class="section seo">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    {!! $page->body !!}
                </div>
            </div>
        </div>
    </section>
@endsection