@extends('index')

@section('main')
    <main id="main" class="subpage bgWhite">
        <article>
            <div class="content" id="opinions">
                <div class="container">
                    <h1>Detektor tętna płodu opinie</h1>
                    <div class="row-flex">
                        <div class="col-lg-7">
                            <div class="opinions-list opinions-list--bt">
                                @foreach ($opinions as $opinion)
                                    <div class="opinion">
                                        <div class="opinion__inner">
                                            <div class="opinion__header flex flex--center-y">
                                                <div class="opinion__name">{{ $opinion->name }}</div>
                                                <div class="opinion__stars">
                                                <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>
                                                </span>
                                                </div>
                                            </div>
                                            <div class="opinion__body">
                                                <div class="opinion__title">{{ $opinion->title ?? '' }}</div>
                                                <div class="opinion__desc">{!! nl2br(e($opinion->body), false) !!}</div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="col-lg-5 relative js-sticky-track">
                            @if(!empty($page->extra_i18n->products->items))
                                <div class="products-list products-list--opinions js-sticky-product-box">
                                    @foreach($page->extra_i18n->products->items as $item)
                                        @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->button) && !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>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </main>
@endsection