@extends('index')

@section('main')
    <main id="main" class="subpage bgWhite">
        <article>
            <div class="home-slider">
                <div class="home-slider__item">
                    <div class="home-slider__inner">
                        <div class="home-slider__body">
                            <div class="home-slider__title-over"><h1>{!! nl2br($page->extra_i18n->top->header_small ?? '') !!}</h1></div>
                            <div class="home-slider__title">{!! nl2br($page->extra_i18n->top->header ?? '') !!}</div>
                            <p class="home-slider__text">{!! nl2br($page->extra_i18n->top->text ?? '') !!}</p>
                            @if(!empty($page->extra_i18n->top->button) && !empty($page->extra_i18n->top->url))
                                <div class="home-slider__action">
                                    <a href="{{ $page->extra_i18n->top->url }}" class="btn btn-primary btn-primary--uppercase">{!! $page->extra_i18n->top->button !!}</a>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="home-slider__img">
                        @php($file = new FileModel(['path' => $page->extra_i18n->top->image[0]->data ?? '', 'data' => $page->extra_i18n->top->image[0]->data ?? '']))
                        <img src="{{ !empty($file->path) ? $file->adaptive(1920, 840) : 'assets/img/product-angelsounds-smart-header.jpg' }}" alt="AngelSounds" class="home-slider__img-desktop">
                        @php($file = new FileModel(['path' => $page->extra_i18n->top->image_mobile[0]->data ?? '', 'data' => $page->extra_i18n->top->image_mobile[0]->data ?? '']))
                        <img src="{{ !empty($file->path) ? $file->adaptive(1000, 750) : 'assets/img/placeholder-smart-100x750.jpg' }}" alt="AngelSounds" class="home-slider__img-mobile">
                    </div>
                </div>
            </div>
            <div class="text-img text-img--overflow" id="angelsounds-smart-read-more">
                <div class="container">
                    <div class="row-flex">
                        <div class="col-lg-5">
                            <div class="text-img__inner text-img__inner--big">
                                <div class="text-img__subtitle">{!! nl2br($page->extra_i18n->icons_section->header_small ?? '') !!}</div>
                                <div class="text-img__title">{!! nl2br($page->extra_i18n->icons_section->header ?? '') !!}</div>
                                <figure class="text-img__img text-img__img--right text-img__img--center text-img__img--fill text-img__img--1199">
                                    @php($file = new FileModel(['path' => $page->extra_i18n->icons_section->image[0]->path ?? '', 'data' => $page->extra_i18n->icons_section->image[0]->data ?? '']))
                                    <img src="{{ !empty($file->path) ? $file->adaptive(1030, 820) : 'assets/img/product-angelsounds-smart-1.jpg' }}" alt="">
                                </figure>
                                <div class="text-img__body">
                                    <p>{!! nl2br($page->extra_i18n->icons_section->text ?? '') !!}</p>
                                    @if(!empty($page->extra_i18n->icons_section->icons))
                                        @foreach($page->extra_i18n->icons_section->icons as $icon)
                                            <p class="ico-box ico-box--ico-{{ $icon->icon ?? '' }}"><strong>{!! $icon->strong ?? '' !!}</strong> - {!! nl2br($icon->text ?? '') !!}</p>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-img text-img--grey text-img--overflow">
                <div class="container">
                    <div class="row-flex">
                        <div class="col-lg-5 col-lg-offset-7">
                            <div class="text-img__inner text-img__inner--big">
                                <div class="text-img__title">{!! nl2br($page->extra_i18n->image_left->header ?? '') !!}</div>
                                <figure class="text-img__img text-img__img--left text-img__img--center text-img__img--fill text-img__img--1199">
                                    @php($file = new FileModel(['path' => $page->extra_i18n->image_left->image[0]->path ?? '', 'data' => $page->extra_i18n->image_left->image[0]->data ?? '']))
                                    <img src="{{ !empty($file->path) ? $file->adaptive(1030, 820) : 'assets/img/product-angelsounds-smart-2.jpg' }}" alt="{{ $file->data->name ?? '' }}">
                                </figure>
                                <div class="text-img__body">
                                    <p>{!! nl2br($page->extra_i18n->image_left->text ?? '') !!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-img">
                <div class="container">
                    <div class="row-flex middle-lg">
                        <div class="col-lg-4">
                            <div class="text-img__inner text-img__inner--big">
                                <div class="text-img__subtitle">{!! nl2br($page->extra_i18n->device->header_small ?? '') !!}</div>
                                <div class="text-img__title">{!! nl2br($page->extra_i18n->device->header ?? '') !!}</div>
                                <div class="text-img__body">
                                    <p>{!! nl2br($page->extra_i18n->device->text ?? '') !!}</p>
                                    <p>
                                        <img src="assets/img/google.jpg" alt="GooglePlay" style="margin: 0 25px 0 0;">
                                        <img src="assets/img/ios.jpg" alt="AppStore">
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            @if(!empty($page->extra_i18n->device->features))
                                <div class="product-app-presentation">
                                    <div class="phone-slider">
                                        <div class="phone-slider__inner owl-carousel">
                                            @foreach($page->extra_i18n->device->features as $feature)
                                                @continue(empty($feature->image))
                                                @php($file = new FileModel(['path' => $feature->image[0]->path ?? '', 'data' => $feature->image[0]->data ?? '']))
                                                <div class="phone-slider__item" data-hash="phone-slide-{{ $loop->iteration }}">
                                                    <img src="{{ $file->adaptive(249, 442) }}" alt="{{ $file->data->name ?? '' }}">
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <ul class="phone-slider-dots">
                                        @foreach($page->extra_i18n->device->features as $feature)
                                            <li><a class="ico-{{ $feature->icon ?? '' }}{{ $loop->first ? ' is-active' : '' }}" href="#phone-slide-{{ $loop->iteration }}">{!! $feature->name ?? '' !!}</a></li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="overflow-h">
                <div class="text-img-fullwidth">
                    <div class="text-img-fullwidth__img">
                        @php($file = new FileModel(['path' => $page->extra_i18n->text_center->image[0]->path ?? '', 'data' => $page->extra_i18n->text_center->image[0]->data ?? '']))
                        <img src="{{ !empty($file->path) ? $file->adaptive(1920, 850) : 'assets/img/product-angelsounds-smart-full-1.jpg' }}" alt="{{ $file->data->name ?? '' }}">
                    </div>
                    <div class="text-img-fullwidth__inner text-img-fullwidth__inner--left-bottom">
                        <div class="text-img-fullwidth__body">
                            <div class="text-img-fullwidth__title">{!! nl2br($page->extra_i18n->text_center->text ?? '') !!}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-img text-img--grey-2 text-img--overflow txt-center-750">
                <div class="container">
                    <div class="row-flex">
                        <div class="col-lg-5 col-lg-offset-7">
                            <div class="text-img__inner text-img__inner--big">
                                <div class="text-img__title">{!! nl2br($page->extra_i18n->image_left2->header ?? '') !!}</div>
                                <figure class="text-img__img text-img__img--left text-img__img--center text-img__img--fill text-img__img--1199">
                                    @php($file = new FileModel(['path' => $page->extra_i18n->text_center->image[0]->path ?? '', 'data' => $page->extra_i18n->text_center->image[0]->data ?? '']))
                                    <img src="{{ !empty($file->path) ? $file->adaptive(811, 850) : 'assets/img/product-angelsounds-smart-5.jpg' }}" alt="{{ $file->data->name ?? '' }}">
                                </figure>
                                <div class="text-img__body">
                                    <p>{!! nl2br($page->extra_i18n->image_left2->text ?? '') !!}</p>
                                    @if(!empty($page->extra_i18n->image_left2->button) && !empty($page->extra_i18n->image_left2->url))
                                        <p><a href="{{ $page->extra_i18n->image_left2->url }}" class="btn btn-primary btn-primary--uppercase">{!! $page->extra_i18n->image_left2->button !!}</a></p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if(!empty($page->extra_i18n->gallery->images))
                <div class="overflow-h">
                    <div class="img-fullwidth img-fullwidth--four img-fullwidth--product">
                        <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-3"><img src="{{ $file->adaptive(477, 477) }}"></div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

            <div class="text-img text-img--grey-2 text-img--overflow txt-center-750">
                <div class="container">
                    <div class="row-flex">
                        <div class="col-lg-5 col-lg-offset-7">
                            <div class="text-img__inner text-img__inner--big">
                                <div class="text-img__subtitle">{!! nl2br($page->extra_i18n->image_left3->header_small ?? '') !!}</div>
                                <div class="text-img__title">{!! nl2br($page->extra_i18n->image_left3->header ?? '') !!}</div>
                                <figure class="text-img__img text-img__img--left text-img__img--center text-img__img--fill text-img__img--1199">
                                    @php($file = new FileModel(['path' => $page->extra_i18n->image_left3->image[0]->path ?? '', 'data' => $page->extra_i18n->image_left3->image[0]->data ?? '']))
                                    <img src="{{ !empty($file->path) ? $file->adaptive(983, 850) : 'assets/img/product-angelsounds-smart-3.jpg' }}" alt="{{ $file->data->name ?? '' }}">
                                </figure>
                                <div class="text-img__body">
                                    <p>{!! nl2br($page->extra_i18n->image_left3->text ?? '') !!}</p>
                                    <figure>
                                        <img src="assets/img/product-angelsounds-smart-logos.jpg" alt="">
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-img text-img--overflow" id="player-section">
                <div class="container">
                    <div class="row-flex">
                        <div class="col-lg-5">
                            <div class="text-img__inner text-img__inner--big">
                                <div class="text-img__title">{!! nl2br($page->extra_i18n->image_right->header ?? '') !!}</div>
                                <figure class="text-img__img text-img__img--right text-img__img--center text-img__img--fill text-img__img--1199">
                                    @php($file = new FileModel(['path' => $page->extra_i18n->image_right->image[0]->path ?? '', 'data' => $page->extra_i18n->image_right->image[0]->data ?? '']))
                                    <img src="{{ !empty($file->path) ? $file->adaptive(959, 620) : 'assets/img/product-angelsounds-smart-4.jpg' }}" alt="{{ $file->data->name ?? '' }}">
                                </figure>
                                <div class="text-img__body">
                                    <p>{!! nl2br($page->extra_i18n->image_right->text ?? '') !!}</p>
                                    <p>
                                        <span class="play-sound" id="heart-player-btn">
                                            <span class="play-sound__ico">
                                                <i class="ico icoPlay"></i>
                                                <img src="assets/img/heart-border.svg" alt="">
                                            </span>
                                            <span class="play-sound__body"><strong>Posłuchaj</strong> Własnie tak bije małe serduszko</span>
                                        </span>
                                        <audio id="heart-player" preload="none">
                                            <source src="assets/sounds/angelsounds-dzwiek.ogg" type="audio/ogg">
                                            <source src="assets/sounds/angelsounds-dzwiek.mp3" type="audio/mpeg">
                                            <source src="assets/sounds/angelsounds-dzwiek.wav" type="audio/wav">
                                        </audio>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <section class="section12">
                <div class="container">
                    <article class="text">
                        <i class="ico icoBadgeOk"></i>
                        {!! $page->extra_i18n->guarantee->text ?? '' !!}
                    </article>
                </div>
            </section>
            <div class="overflow-h">
                <div class="text-img-fullwidth">
                    <div class="text-img-fullwidth__img">
                        @php($file = new FileModel(['path' => $page->extra_i18n->text_center2->image[0]->path ?? '', 'data' => $page->extra_i18n->text_center2->image[0]->data ?? '']))
                        <img src="{{ !empty($file->path) ? $file->adaptive(959, 620) : 'assets/img/product-angelsounds-smart-full-2.jpg' }}" alt="{{ $file->data->name ?? '' }}">
                    </div>
                    <div class="text-img-fullwidth__inner">
                        <div class="text-img-fullwidth__body">
                            <div class="text-img-fullwidth__title">{!! nl2br($page->extra_i18n->text_center2->text ?? '') !!}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="overflow-h">
                <div class="text-img text-img--grey-2 text-img--overflow txt-center-750">
                    <div class="container">
                        <div class="row-flex">
                            <div class="col-lg-5 col-lg-offset-7">
                                <div class="text-img__inner text-img__inner--big">
                                    <div class="text-img__title">{!! nl2br($page->extra_i18n->image_left4->header ?? '') !!}</div>
                                    <figure class="text-img__img text-img__img--left text-img__img--center text-img__img--fill text-img__img--1199">
                                        @php($file = new FileModel(['path' => $page->extra_i18n->image_left4->image[0]->path ?? '', 'data' => $page->extra_i18n->image_left4->image[0]->data ?? '']))
                                        <img src="{{ !empty($file->path) ? $file->adaptive(811, 850) : 'assets/img/product-angelsounds-smart-5.jpg' }}" alt="{{ $file->data->name ?? '' }}">
                                    </figure>
                                    <div class="text-img__body">
                                        <p>{!! nl2br($page->extra_i18n->image_left4->text ?? '') !!}</p>
                                        @if(!empty($page->extra_i18n->image_left4->button) && !empty($page->extra_i18n->image_left4->url))
                                            <p><a href="{{ $page->extra_i18n->image_left4->url }}" class="btn btn-primary btn-primary--uppercase">{{ $page->extra_i18n->image_left4->button }}</a></p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        @if(!empty($page->extra_i18n->mobile->name) && !empty($page->extra_i18n->mobile->price))
            <div class="fixed-mobile-title"><span>{!! $page->extra_i18n->mobile->name ?? '' !!}</span><em>{!! $page->extra_i18n->mobile->price ?? '' !!}</em></div>
        @endif
        @if(!empty($page->extra_i18n->mobile->button) && !empty($page->extra_i18n->mobile->url))
            <div class="fixed-mobile-action">
                <a href="{{ $page->extra_i18n->mobile->url }}" class="btn btn-primary">{{ $page->extra_i18n->mobile->button }}</a>
            </div>
        @endif
    </main>
@endsection