@extends('front.app', ['home_page'=>1])

@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')

    <div class="page-content">
        @if($slider->isNotEmpty())
            <div class="hero-slider">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        @foreach($slider as $one_item)
                            @if($one_item->only_image)
                                <a @if($one_item->link && Str::contains($one_item->link, '#')) style="cursor: pointer"
                                   data-modal="product"
                                   onclick="showGoodsModal('{{str_replace('#','',trim($one_item->link))}}')"
                                   @elseif($one_item->link) href="{{ $one_item->link }}" @endif class="swiper-slide">
                                    <div class="hero-slider-bg" style="width: 100%">
                                        <img
                                            src="{{ $one_item->image ? asset('upfiles/slider/'. $one_item->image) : asset('front-assets/img/no-image.png') }}"
                                            alt="{{$one_item->name ?? ''}}">
                                    </div>
                                </a>
                            @else
                                <div class="swiper-slide">
                                    <div class="hero-slider-bg">
                                        <img
                                            src="{{ $one_item->image ? asset('upfiles/slider/'. $one_item->image) : asset('front-assets/img/no-image.png') }}"
                                            alt="{{$one_item->name ?? ''}}">
                                    </div>
                                    @if($one_item->link)
                                        <a href="{{$one_item->link}}" data-modal="product" class="hero-slider-content"
                                           onclick="showGoodsModal('{{str_replace('#','',trim($one_item->link))}}')">
                                            <div class="container">
                                                <div class="hero-slider-desc">{!!$one_item->body !!}</div>
                                                <div class="hero-slider-name">{{$one_item->name}}</div>
                                                <div class="hero-slider-price">{{$one_item->price}}</div>
                                            </div>
                                        </a>
                                    @else
                                        <div class="hero-slider-content">
                                            <div class="container">
                                                <div class="hero-slider-desc">{!!$one_item->body !!}</div>
                                                <div class="hero-slider-name">{{$one_item->name}}</div>
                                                <div class="hero-slider-price">{{$one_item->price}}</div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>

                <div class="hero-slider-navs">
                    <div class="container">
                        <div class="hero-slider-navs-inner">
                            <button type="button" class="hero-slider-nav hero-slider--prev">
                                <svg>
                                    <use xlink:href="{{asset('front-assets/svg/sprite.svg#arrow-right')}}"></use>
                                </svg>
                            </button>
                            <button type="button" class="hero-slider-nav hero-slider--next">
                                <svg>
                                    <use xlink:href="{{asset('front-assets/svg/sprite.svg#arrow-right')}}"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if($catalog_main_page->isNotEmpty())
            <div class="section page-tabs">
                <div class="container">
                    <div class="page-tabs-list">
                        @foreach($catalog_main_page as $one_item)
                            <a href="#{{$one_item->alias}}" class="page-tabs-item" scroll-to-item>
                                <span class="page-tabs-img">
                                    <img src="{{  $one_item->webp }}" alt="{{$one_item->name}}">
                                </span>
                                <span class="page-tabs-content">
                                    <span>{{$one_item->name}}</span>
                                </span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>

            @foreach($catalog_main_page as $category_alias=>$one_item)
                @if($one_item->goodsItemPopular->isNotEmpty())
                    <div id="{{$category_alias}}" class="section products {{$one_item->id == 14?'products--small':''}}">
                        <div class="container">
                            <div class="section-head">
                                @if(isset($one_item->menuItem))
                                    <img src="{{ $one_item->menuItem->image }}" alt="{{ $one_item->menuItem->name }}">
                                @endif
                                <h2>{{$one_item->menuItem->name ?? $one_item->name}}</h2>
                            </div>
                            <div class="products-list">
                                @foreach($one_item->goodsItemPopular as $product)
                                    @include('front.templates.goods-template')
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        @endif

        @if($main_page && $main_page->body)
            <div class="section page-desc">
                <div class="container">
                    <h1 class="h2 text-center">{{ $main_page->h1_title ?? '' }}</h1>
                    <div class="common-text">
                        {!! $main_page->body !!}
                    </div>
                    <div class="page-desc-more">
                        <button class="page-desc-more-btn" data-more="{{ShowLabelById(91)}}" data-less="{{ShowLabelById(92)}}">
                            <span>{{ShowLabelById(91)}}</span>
                            <svg>
                                <use xlink:href="{{ asset('front-assets/svg/sprite.svg#arrow-right') }}"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        @endif
    </div>

@stop