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

@section('container')

    <div class="page-content">

        <!-- Home Hero start -->
        @if(!empty($slider) && count($slider))
            <div class="home-hero">
                <div class="container">
                    <div class="inner">
                        <div class="home-hero-main">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    @foreach($slider as $slide)
                                        <div class="swiper-slide">
                                            <a href="{{ $slide->itemByLang->link ?? '' }}">
                                                <picture>
                                                    <source srcset="{{ $slide->itemByLang->img ? asset('upfiles/slider/'. $slide->itemByLang->img) : asset('front-assets/img/no-image-slider.png') }}" media="(max-width: 991px)">
                                                    <img src="{{ $slide->itemByLang->img ? asset('upfiles/slider/'. $slide->itemByLang->img) : asset('front-assets/img/no-image-slider.png') }}" alt="{{ $slide->itemByLang->name ?? '' }}">
                                                </picture>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="slider-pagination"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <!-- Home Hero end -->

        <!-- Products start -->
        @if($goods_subjects_sale)
            <div class="section products">
                <div class="container">
                    <h2>{{ShowLabelById(274)}}</h2>
                    <div class="products-content active">
                        <div class="products-main products-countdown">
                            <div class="products-countdown-bg">
                                <img src="{{asset('upfiles/goods-subject/' . $goods_subjects_sale->img)}}" alt="{{$goods_subjects_sale->itemByLang->name ?? ''}}">
                            </div>
                            <div class="products-countdown-content">
                                <div class="products-countdown-head">
                                    <div class="title">{{$goods_subjects_sale->itemByLang->text_promo_1 ?? ''}}</div>
                                    <div class="descr">{{$goods_subjects_sale->itemByLang->text_promo_2 ?? ''}}</div>
                                </div>
                            </div>
                            @if($goods_subjects_sale->discount_date_end > now())
                                <div class="inner">
                                    <div id="products-countdown" class="products-counter-inner">
                                        <div class="products-counter-item days">
                                            <div class="products-counter-number">00</div>
                                            <div class="products-counter-text">{{ShowLabelById(203)}}</div>
                                        </div>
                                        <div class="products-counter-delimiter">:</div>
                                        <div class="products-counter-item hours">
                                            <div class="products-counter-number">00</div>
                                            <div class="products-counter-text">{{ShowLabelById(204)}}</div>
                                        </div>
                                        <div class="products-counter-delimiter">:</div>
                                        <div class="products-counter-item minutes">
                                            <div class="products-counter-number">00</div>
                                            <div class="products-counter-text">{{ShowLabelById(205)}}</div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="products-slider">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    @foreach($goods_item_sale as $one_goods)
                                        <div class="swiper-slide products-item">
                                            @include('front.templates.goods-template')
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <button type="button" class="slider-nav slider-nav--prev">
                                <svg>
                                    <use xlink:href="{{asset('front-assets/svg/sprite.svg#arrow-right')}}"></use>
                                </svg>
                            </button>
                            <button type="button" class="slider-nav slider-nav--next">
                                <svg>
                                    <use xlink:href="{{asset('front-assets/svg/sprite.svg#arrow-right')}}"></use>
                                </svg>
                            </button>
                            <div class="slider-pagination"></div>
                        </div>
                    </div>
                    <div class="products-link">
                        <a href="{{route('catalog', ['category' => 'sale'])}}">
                            <span>{{ShowLabelById(275)}}</span>
                            <svg>
                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#arrow-top-right')}}"></use>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        @endif
        <!-- Products end -->

        <!-- Home Services start -->
        @if($our_services)
            <div class="section home-services">
                <div class="container">
                    <h2>{{$our_services->itemByLang->name ?? ''}}</h2>
                    @if(!empty($our_services->children) && count($our_services->children))
                        <div class="list">
                            @foreach($our_services->children as $item)
                                <div class="item">
                                    @if($item->oImage && $item->oImage->img)
                                        <div class="icon">
                                            <img src="{{asset('upfiles/menu/' . $item->oImage->img)}}" alt="{{$item->itemByLang->name ?? ''}}">
                                        </div>
                                    @endif
                                    <div class="order">0{{$loop->iteration ?? 0}}</div>
                                    <div class="text">
                                        <h3>{{$item->itemByLang->name ?? ''}}</h3>
                                        <p>{{$item->itemByLang->short_descr ?? ''}}</p>
                                    </div>
                                    <div class="cta">
                                        <a href="{{$item->itemByLang->link ?? ''}}" class="button">{!!$item->itemByLang->page_title ?? ''!!}</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        @endif
        <!-- Home Services end -->

        @if(!empty($goods_subjects_row) && count($goods_subjects_row))
            @include('front.templates.goods-subject-rows-main-page', ['goods_subjects_row' => $goods_subjects_row])
        @endif

        <!-- Home Advantages start -->
        @if($advantages && $advantages->children->isNotEmpty())
            <div class="section home-advantages">
                <div class="container">
                    <div class="list">
                        @foreach($advantages->children as $one_advantage)
                            <div class="item">
                                <div class="icon">
                                    <img
                                        src="{{ $one_advantage->oImage && $one_advantage->oImage->img ? asset('upfiles/menu/'. $one_advantage->oImage->img) : asset('front-assets/img/no-image-85.png') }}"
                                        alt="{{ $one_advantage->itemByLang->name ?? '' }}"
                                    >
                                </div>
                                <div class="text">
                                    <h3>{{ $one_advantage->itemByLang->name ?? '' }}</h3>
                                    <p>{{ $one_advantage->itemByLang->short_descr ?? '' }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
        <!-- Home Advantages end -->

        <!-- Products start -->
        @if($goods_subjects_gold)
            <div class="section products">
                <div class="container">
                    <h2>{{ShowLabelById(278)}}</h2>
                    <div class="products-content active">
                        <a href="{{route('catalog', ['category' => $goods_subjects_gold->alias])}}" class="products-main">
                            <img
                                src="{{ $goods_subjects_gold->img ? asset('upfiles/goods-subject/'. $goods_subjects_gold->img) : asset('front-assets/img/no-image-goods-s.png') }}"
                                alt="{{ $goods_subjects_gold->itemByLang->name ?? '' }}"
                            >
                        </a>
                        @if(!empty($goods_item_gold) && count($goods_item_gold))
                            <div class="products-slider">
                                <div class="swiper-container">
                                    <div class="swiper-wrapper">
                                        @foreach($goods_item_gold as $one_goods)
                                            <div class="swiper-slide products-item">
                                                @include('front.templates.goods-template')
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <button type="button" class="slider-nav slider-nav--prev">
                                    <svg>
                                        <use xlink:href="{{asset('front-assets/svg/sprite.svg#arrow-right')}}"></use>
                                    </svg>
                                </button>
                                <button type="button" class="slider-nav slider-nav--next">
                                    <svg>
                                        <use xlink:href="{{asset('front-assets/svg/sprite.svg#arrow-right')}}"></use>
                                    </svg>
                                </button>
                                <div class="slider-pagination"></div>
                            </div>
                        @endif
                    </div>
                    <div class="products-link">
                        <a href="{{route('catalog', ['category' => $goods_subjects_gold->alias])}}">
                            <span>{{ShowLabelById(275)}}</span>
                            <svg>
                                <use xlink:href="{{asset('front-assets/svg/sprite.svg#arrow-top-right')}}"></use>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        @endif
        <!-- Products end -->

        <!-- Home Newsletter start -->
        <div class="section home-newsletter">
            <div class="container">
                <div class="inner">
                    @if($newsletter)
                        <div class="home-newsletter-content">
                            <div class="home-newsletter-bg">
                                @if($newsletter->oImage && $newsletter->oImage->img)
                                    <img src="{{asset('upfiles/menu/'. $newsletter->oImage->img)}}" alt="{{$newsletter->itemByLang->name ?? ''}}">
                                @endif
                            </div>
                            <div class="home-newsletter-content-inner">
                                <div class="text">
                                    <h2>{{$newsletter->itemByLang->name ?? ''}}</h2>
                                    <p>{{$newsletter->itemByLang->short_descr ?? ''}}</p>
                                </div>
                                @if(!empty($newsletter->children) && count($newsletter->children))
                                    <div class="info">
                                        <ul>
                                            @foreach($newsletter->children as $item)
                                                <li>
                                                    @if($item->oImage && $item->oImage->img)
                                                        <img src="{{asset('upfiles/menu/'. $item->oImage->img)}}" alt="{{$item->itemByLang->name ?? ''}}">
                                                    @endif
                                                    <p>{{$item->itemByLang->name ?? ''}}</p>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif
                    <div class="home-newsletter-form">
                        <form action="{{ route('addNewsletter') }}" method="post" id="newsletter" enctype="multipart/form-data">
                            @csrf
                            <div class="home-newsletter-row">
                                <div class="form-item">
                                    <label for="name" class="sr-only">{{ShowLabelById(6)}}</label>
                                    <input type="text" id="name" name="name" placeholder="{{ShowLabelById(6)}}">
                                    <img src="{{asset('front-assets/img/icons/user.svg')}}" alt="User">
                                </div>
                                <div class="form-item">
                                    <label for="phone" class="sr-only">{{ShowLabelById(9)}}</label>
                                    <input type="text" id="phone" name="phone" placeholder="{{ShowLabelById(9)}}">
                                    <img src="{{asset('front-assets/img/icons/phone-2.svg')}}" alt="Phone-2">
                                </div>
                                <div class="form-item">
                                    <label for="email" class="sr-only">{{ShowLabelById(8)}}</label>
                                    <input type="text" id="email" name="email" placeholder="{{ShowLabelById(8)}}">
                                    <img src="{{asset('front-assets/img/icons/email.svg')}}" alt="Email">
                                </div>
                            </div>
                            <p class="aggreement">
                                <label>
                                    <input id="agreement" name="agree" type="checkbox">
                                    <span class="aggreement-checkbox"></span>
                                    {!! ShowLabelById(13) !!}
                                </label>
                            </p>
                            <p class="aggreement">
                                <label>
                                    <input id="agree_newsletter" name="agree_newsletter" type="checkbox">
                                    <span class="aggreement-checkbox aggreement-checkbox-newsletter"></span>
                                    {{ShowLabelById(284)}}
                                </label>
                            </p>
                            <p class="aggreement">
                                <label>
                                    <input id="agree_email" name="agree_email" type="checkbox">
                                    <span class="aggreement-checkbox aggreement-checkbox-email"></span>
                                    {{ShowLabelById(285)}}
                                </label>
                            </p>
                            <div class="captcha">
                                <input type="hidden" name="g-recaptcha-response" id="recaptcha-form-newsletter">
                            </div>
                            <div class="form-submit">
                                <button type="submit" class="button" onclick="saveForm(this)" data-form-id="newsletter">{{ShowLabelById(280)}}</button>
                            </div>
                            <div class="info">
                                <img src="{{asset('front-assets/img/icons/lock.svg')}}" alt="Lock">
                                <span>{{ShowLabelById(279)}}</span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Home Newsletter end -->

    </div>

    @push('other-scripts')
        <script>
            getRecaptcha('/', 'recaptcha-form-newsletter');
        </script>
    @endpush

    @include('front.templates.script-timer-promo-sale')

@stop