@extends('layouts.frontend')

@section('title', $currentPage->title)

@section('body')

<section class="j-home-tiles">
    <div class="container">
        <div class="j-home-slider">
            <div class="slides">
                @foreach($slider ?? [] as $slide)
                    <div class="slide item item-top @if ($loop->first) is-selected @endif">
                        <picture>
                            <source srcset="{{ resize($slide['vertical_image'], 414) }} 1x, {{ resize($slide['vertical_image'], 828) }} 2x" media="(max-width: 413px)" type="image/webp">
                            <source srcset="{{ resize($slide['image'], 1400) }} 1x, {{ resize($slide['image'], 2800) }} 2x" media="(min-width: 992px)" type="image/webp">
                            <source srcset="{{ resize($slide['vertical_image'], 992) }} 1x, {{ resize($slide['vertical_image'], 1984) }} 2x" media="(min-width: 576px)" type="image/webp">
                            <source srcset="{{ resize($slide['vertical_image'], 576) }} 1x, {{ resize($slide['vertical_image'], 1152) }} 2x" media="(min-width: 414px)" type="image/webp">
                            <img class="background" src="" alt="" loading="lazy">
                        </picture>
                        <div class="content">
                            <h3 class="heading">
                                @if ($slide['type'] == 'category')
                                    <a href="{{ category_url($slide['category'] ?? '') }}">{{ $slide['heading'] ?? 'Jaunā kolekcija' }}</a>
                                @elseif ($slide['type'] == 'page')
                                    <a href="{{ page_url($slide['page'] ?? '') }}">{{ $slide['heading'] ?? 'Jaunā kolekcija' }}</a>
                                @elseif ($slide['type'] == 'url')
                                    <a href="{{ $slide['url'] ?? '' }}">{{ $slide['heading'] ?? 'Jaunā kolekcija' }}</a>
                                @endif                            </h3>
                            <div class="block">
                                <div class="rel">
                                    {{ $slide['text'] ?? '' }}
                                </div>
                            </div>
                            <div>
                                @if ($slide['type'] == 'category')
                                    <a class="readmore" href="{{ category_url($slide['category'] ?? '') }}">{{ $slide['link_text'] ?? '' }}</a>
                                @elseif ($slide['type'] == 'page')
                                    <a class="readmore" href="{{ page_url($slide['page'] ?? '') }}">{{ $slide['link_text'] ?? '' }}</a>
                                @elseif ($slide['type'] == 'url')
                                    <a class="readmore" href="{{ $slide['url'] ?? '' }}">{{ $slide['link_text'] ?? '' }}</a>
                                @endif                            </div>
                        </div>
                    </div>
                @endforeach            </div>
        </div>
        
        <div class="row no-gutters j-home-tiles-carousel">
            <a href="{{ page_url($left_page ?? '') }}" class="col-8 col-sm-6 item item-sale d-block">
                <img class="background" src="{{ Storage::url($left_image ?? '') }}" alt="" loading="lazy">
                <div class="content">{{ $left_title ?? '' }}</div>
            </a>
            <a href="{{ page_url($right_page ?? '') }}" class="col-8 col-sm-6 item item-shops d-block">
                <img class="background" src="{{ Storage::url($right_image) }}" alt="" loading="lazy">
                <div class="cross">@include('svg.card-cross')</div>
                <div class="content">{{ $right_title ?? '' }}</div>
            </a>
        </div>
    </div>
</section>

<section class="j-home-tiles2">
    <div class="container">
        <div class="row no-gutters j-home-tiles2-carousel">
            <a href="{{ page_url($small1_page ?? '') }}" class="col-7 col-sm-4 item item-textbottom">
                @if (isset($small1_image))
                    <img class="background" src="{{ Storage::url($small1_image) }}" alt="" loading="lazy">
                @endif                <div class="cross">@include('svg.card-cross')</div>
                <div class="content">{{ $small1_title ?? '' }}</div>
            </a>
            <a href="{{ page_url($small2_page ?? '') }}" class="col-7 col-sm-4 item item-texttop">
                @if (isset($small2_image))
                    <img class="background" src="{{ Storage::url($small2_image) }}" alt="" loading="lazy">
                @endif                <div class="cross">@include('svg.card-cross')</div>
                <div class="content">{{ $small2_title ?? '' }}</div>
            </a>
            <a href="{{ page_url($small3_page ?? '') }}" class="col-7 col-sm-4 item item-textmiddle">
                @if (isset($small3_image))
                    <img class="background" src="{{ Storage::url($small3_image) }}" alt="" loading="lazy">
                @endif                <div class="cross">@include('svg.card-cross')</div>
                <div class="content">{{ $small3_title ?? '' }}</div>
            </a>
        </div>
    </div>
</section>

@if (isset($recommended_items))
<section class="j-home-recommended">
    <div class="container">
        <h2 class="j-home-recommended-heading">
            <a href="{{ category_url($recommended_category) }}">
                {{ $recommended_heading ?? '' }}
            </a>
        </h2>
        @include('components.product_carousel', ['products' => $recommended_items, 'dataLayerList' => 'Recommended'])
    </div>
</section>
@endif
@endsection