@extends('layouts.front')

@section('content')
    <div class="home-page-banner gutter-lg">
    <div class="home-slider owl-carousel owl-theme main-slider"
         data-owl-options="{'loop': true, 'dots': true, 'nav': true, 'autoplay': true, 'autoplayTimeout': '5000' }">
        @foreach($home->attachments as $image)
        <div class="home-slide home-slide1 banner">
                <span class="img-wrap banner-img-wrap">
                    <img  class="slide-bg image" src="{{$image->urls['original']}}" alt="slider image">
                </span>
        </div>
        @endforeach
    </div>
</div>

    <section class="top-new-products-section gutter-lg">
        <div class="container">
            <div class="top-new-product-list">
                <div class="top-new-product-box">
                    <span class="img-box img-wrap top-new-img-wrap">
                        <img src="{{$home->isNewImage->urls['original']}}" class="new-product image" alt="" />
                    </span>
                    <a href="{{route('front.offerDay')}}" class="title-box" style="--color:{{$home->color}} ">
                        {{$home->is_new}}
                    </a>
                </div>
                <div class="top-new-product-box">
                    <span class="img-box img-wrap top-new-img-wrap">
                        <img src="{{$home->discountImage->urls['original']}}" class="new-product image"  alt="" />
                    </span>
                    <a href="{{route('front.discountedAssortment')}}" class="title-box" style="--color:{{$home->color_discount}}">
                        {{$home->discount}}
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="product-category-panel gutter-lg">
        <div class="container">
            <div class="product-category-list">
                @foreach($categories as $categorie)
                <a href="{{url($categorie->publish_url)}}" class="product-category-box">
                    <span class="img-wrap category-img-wrap"><img src="{{$categorie->mainImage->urls['original']}}"  class="product-category-img image" alt="" /></span>
                    <span class="title-box">
                        {{$categorie->name}}
                    </span>
                </a>
                @endforeach
            </div>
        </div>
    </section>

<!--    <section class="centered-img-section  gutter-md">
        <div class="container">
            <div class="centered-img-box">
                <img src="/images/main/second-logo.png" class="second-logo" alt="" />
            </div>
        </div>
    </section>-->

    <section class="related-products-section">
        <div class="container">
            <div class="main-title-with-line">
                <h3 class="title">Թոփ վաճառք</h3>
            </div>
        </div>
        <div class="main-slider--outer">
            <div class="top-sales owl-carousel owl-theme owl-carousel-lazy main-slider">

                @foreach($products as $product)
                    <product-item :product="{{json_encode($product)}}" ></product-item>
                @endforeach
            </div>
        </div>
    </section>

    <div class="partners-section">
        <div class="container">
            <div class="main-title-with-line">
                <h3 class="title">Բրենդներ </h3>
            </div>
            <our-partners />
        </div>
    </div>
@endsection