@extends('front/layouts.app')

@section('content')    
        <main class="main">        
            <div class="container">
                <div class="home-slider-container">
                    <div class="home-slider owl-carousel owl-theme owl-theme-light nav-outer show-nav-hover slide-animate" data-owl-options="{
                            'navText': [ '<i class=icon-left-open-big>', '<i class=icon-right-open-big>' ]
                            }">
                        <div class="home-slide">
                            <figure style="background-color: #d7b697;">
                                <img class="slide-bg" src="{{asset('images/2233.jpg')}}" width="360" height="270" alt="Home Banner" />
                            </figure>
                            <!-- End .slide-bg -->
                            <div class="home-slide-content sale-banner">
                                <div class="row no-gutter bg-primary appear-animate" data-animation-name="fadeInLeftShorter">
                                    <div class="col-auto col-md-6 d-flex flex-column justify-content-center col-1">
                                        <h4 class="align-left text-uppercase mb-0 appear-animate" data-animation-name="slideInRight" data-animation-delay="400">Latoflex</h4>
                                        <h3 class="text-white mb-0 align-left text-uppercase appear-animate" data-animation-name="slideInRight" data-animation-delay="400">Velika Raspordaja
                                        </h3>
                                    </div>

                                    <div class="col-auto col-md-6 col-2 appear-animate" data-animation-name="slideInLeft" data-animation-delay="400">
                                        <h2 class="text-white mb-0 position-relative align-left">
                                            50<small>%<ins>popust</ins></small>
                                        </h2>
                                    </div>
                                </div>
                                <div class="mb-0 text-right">
                                    <a href="{{ url('/proizvodi') }}" class="btn btn-lg btn-dark appear-animate" data-animation-name="fadeInUpShorter" data-animation-delay="600">Poruči sada!</a>
                                </div>
                            </div>
                        </div>
                        <!-- End .home-slide -->

                        <div class="home-slide home-slide-left">
                            <figure style="background-color: #ceb49d;">
                                <img class="slide-bg" src="{{asset('images/dusek.jpg')}}" width="360" height="270" alt="Home Banner" />
                            </figure>
                            <!-- End .slide-bg -->
                            <div class="home-slide-content slide-content-dark sale-banner">
                                <div class="row no-gutter bg-secondary appear-animate" data-animation-name="fadeInRightShorter">
                                    <div class="col-auto col-md-6 d-flex flex-column justify-content-center col-1">
                                        <h4 class="align-left text-uppercase mb-0 appear-animate" data-animation-name="slideInRight" data-animation-delay="300">Spavaj udobnije
                                        </h4>
                                        <h3 class="text-white mb-0 align-left text-uppercase appear-animate" data-animation-name="slideInRight" data-animation-delay="300">vekila ušteda
                                        </h3>
                                    </div>

                                    <div class="col-auto col-md-6 col-2 appear-animate" data-animation-name="slideInLeft" data-animation-delay="300">
                                        <h2 class="text-white mb-0 position-relative align-left">
                                            50<small>%<ins>Popust</ins></small>
                                        </h2>
                                    </div>
                                </div>
                                <div class="mb-0">
                                    <a href="{{ url('/proizvodi') }}" class="btn btn-lg btn-primary appear-animate" data-animation-name="fadeInUpShorter" data-animation-delay="600">Poruči sada!</a>
                                </div>
                            </div>
                            <!-- End .home-slide-content -->
                        </div>
                        <!-- End .home-slide -->
                    </div>
                    <!-- End .home-slider -->
                </div>
                <!-- End .home-slider-container -->
            </div>
            <!-- End .container -->

            <div class="container banner-container">
                <div class="row justify-content-center">
                    <div class="col-md-4 col-sm-6 mt-3 mt-md-0 appear-animate" data-animation-name="fadeInRightShorter" data-y="200">
                        <h3 class="subtitle title-home-main">Latoflex Krevetne Podloge</h3>
                        <div class="heading-spacer"></div>
                        <div class="banner banner-image home-banner-image">
                            <a href="{{ url('/kategorija/latoflex') }}">
                                <img src="{{asset('images/velikaSlika2.jpg')}}"  alt="banner" />
                            </a>
                            <div class="banner-meta">
                                <a href="{{ url('/kategorija/latoflex') }}">Podloge </a>
                            </div>
                            <!-- End .banner-meta -->
                        </div>
                        <!-- End .banner -->
                    </div>
                    <!-- End .col-md-4 -->

                    <div class="col-md-4 col-sm-6 mt-3 mt-md-0 appear-animate" data-animation-duration="1500">
                        <h3 class="subtitle title-home-main">Dušeci Najnovije Generacije</h3>
                        <div class="heading-spacer"></div>
                        <div class="banner banner-image home-banner-image">
                            <a href="{{ url('/kategorija/duseci') }}">
                                <img src="{{asset('images/duseci-najnovije-generacije.jpg')}}" style="background-color: #e4ddd7;" alt="banner" width="360" height="270" />
                            </a>
                            <div class="banner-meta">
                                <a href="{{ url('/kategorija/duseci') }}" class="white-nowrap">Dušeci </a>
                            </div>
                            <!-- End .banner-meta -->
                        </div>
                        <!-- End .banner -->
                    </div>
                    <!-- End .col-md-4 -->

                    <div class="col-md-4 col-sm-6 mt-3 mt-md-0 appear-animate" data-animation-name="fadeInLeftShorter">
                        <h3 class="subtitle title-home-main">Elementi</h3>
                        <div class="heading-spacer"></div>
                        <div class="banner banner-image home-banner-image">
                            <a href="{{ url('/kategorija/elementi') }}">
                                <img src="{{asset('images/prateci-elementi.png')}}" style="background-color: #e4ddd7;" alt="banner" width="360" height="270" />
                            </a>
                            <div class="banner-meta">
                                <a href="{{ url('/kategorija/elementi') }}">Prateći elementi</a>
                            </div>
                            <!-- End .banner-meta -->
                        </div>
                        <!-- End .banner -->
                    </div>
                    <!-- End .col-md-4 -->
                </div>
                <!-- End .row -->
            </div>
            <!-- End .container -->

            <div class="mb-3"></div>
            <!-- margin -->

            <div class="container feature-container">
                <h2 class="subtitle text-center title-home">Istaknuti Proizvodi</h2>
                <div class="heading-spacer"></div>
                <div class="row">
                    @foreach ($popular as $key => $pop)
                    <div class="col-sm-6  col-md-3 appear-animate" data-animation-delay="100" data-animation-duration="1500">
                        <div class="product-default inner-quickview inner-icon">
                            <figure>
                                <a href="{{ url('proizvod/' . $pop->slug) }}">
                                    <img src="{{ (!empty($pop->img->toArray())) ? url('/') . '/product_uploads/' . $pop->img->toArray()[0]['image'] : '' }}" alt="product" style="width:300px; height:300px;" />
                                    <img src="{{ (!empty($pop->img->toArray())) ? url('/') . '/product_uploads/' . $pop->img->toArray()[1]['image'] : '' }}" alt="product" style="width:300px; height:300px;"  />
                                </a>
                                {{-- <div class="label-group">
                                    <span class="product-label label-sale">-23%</span>
                                </div> --}}
                                <div class="btn-icon-group">
                                    <a href="{{ url('proizvod/' . $pop->slug) }}" class="btn-icon btn-add-cart"><i
                                            class="fa fa-arrow-right"></i>
                                    </a>
                                </div>
                                <a href="{{ url('proizvod/' . $pop->slug) }}">
                                    <span class="btn-quickview btn-details" title="Detaljnije">Detaljnije</span>
                                </a>
                            </figure>
                            <div class="product-details">
                                <div class="category-wrap">
                                    {{-- <div class="category-list">
                                        <a href="demo8-shop.html" class="product-category">Fashion</a>
                                    </div> --}}
                                    {{-- <a href="{{ url('proizvod/' . $pop->slug) }}" title="Wishlist" class="btn-icon-wish"><i
                                            class="icon-heart"></i></a> --}}
                                </div>
                                <h3 class="product-title">
                                    <a href="{{ url('proizvod/' . $pop->slug) }}">{{ $pop->name }}</a>
                                </h3>
                    
                                <!-- End .product-container -->
                                <div class="price-box">
                                    <span class="product-price">{{ number_format(intval($pop->price),2) }} RSD</span>
                                </div>
                                <!-- End .price-box -->
                            </div>
                            <!-- End .product-details -->
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <!-- End .container -->

            <div class="sale-banner banner appear-animate" data-animation-delay="100" data-animation-duration="1500">
                <div class="container banner-content">
                    <div class="row no-gutter bg-secondary">
                        <div class="col-auto col-md-4 d-flex flex-column justify-content-center col-1">
                            <h4 class="align-left text-uppercase mb-0">Latoflex</h4>
                            <h3 class="text-white mb-0 align-left text-uppercase">Velika Raspordaja</h3>
                        </div>
                        <div class="col-auto col-md-4 col-2">
                            <h5 class="text-white mb-0 position-relative align-left">50<small>%<ins>OFF</ins></small>
                            </h5>
                        </div>
                        <div class="mb-0 col-md-4 col-3 col-auto">
                            <a href="{{ url('/proizvodi') }}" class="btn btn-lg btn-primary">Poruči sada!</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container">
                <div class="product-widgets row pt-1">
                    <div class="col-md-4 col-sm-6 pb-5 appear-animate" data-animation-name="fadeInRightShorter">
                        <h4 class="subtitle text-left text-uppercase">Popularni Proizvodi</h4>
                        <div class="heading-spacer"></div>
                        @foreach ($olders as $key => $pop)
                        <div class="product-default left-details product-widget mb-2">
                            <figure>
                                <a href="{{ url('proizvod/' . $pop->slug) }}">
                                    <img src="{{ (!empty($pop->img->toArray())) ? url('/') . '/product_uploads/' . $pop->img->toArray()[0]['image'] : '' }}" style="width:175px; height:175px;" alt="product" />
                                    <img src="{{ (!empty($pop->img->toArray())) ? url('/') . '/product_uploads/' . $pop->img->toArray()[1]['image'] : '' }}" style="width:175px; height:175px;" alt="product" />
                                </a>
                            </figure>
                            <div class="product-details">
                                {{-- <div class="category-list">
                                    <a href="demo8-shop.html" class="product-category">caps</a>
                                </div> --}}
                                <h3 class="product-title"> <a href="{{ url('proizvod/' . $pop->slug) }}">{{ $pop->name }}</a> </h3>
                                <div class="ratings-container">
                                    <div class="product-ratings">
                                        <span class="ratings" style="width:100%"></span>
                                        <!-- End .ratings -->
                                        <span class="tooltiptext tooltip-top"></span>
                                    </div>
                                    <!-- End .product-ratings -->
                                </div>
                                <!-- End .product-container -->
                                <div class="price-box">
                                    <span class="product-price">{{ number_format(intval($pop->price),2) }} RSD</span>
                                </div>
                                <!-- End .price-box -->
                            </div>
                            <!-- End .product-details -->
                        </div>
                        @endforeach
                    </div>
                    <div class="col-md-4 col-sm-6 pb-5 appear-animate" data-animation-delay="100" data-animation-duration="1500">
                        <h4 class="subtitle text-left text-uppercase">Najprodavaniji Proizvodi</h4>
                        <div class="heading-spacer"></div>
                        @foreach ($rated as $key => $pop)
                        <div class="product-default left-details product-widget mb-2">
                            <figure>
                                <a href="{{ url('proizvod/' . $pop->slug) }}">
                                    <img src="{{ (!empty($pop->img->toArray())) ? url('/') . '/product_uploads/' . $pop->img->toArray()[0]['image'] : '' }}" style="width:175px; height:175px;" alt="product" />
                                    <img src="{{ (!empty($pop->img->toArray())) ? url('/') . '/product_uploads/' . $pop->img->toArray()[1]['image'] : '' }}" style="width:175px; height:175px;" alt="product" />
                                </a>
                            </figure>
                            <div class="product-details">
                                {{-- <div class="category-list">
                                    <a href="" class="product-category">Fashion</a>
                                </div> --}}
                                <h3 class="product-title"> <a href="{{ url('proizvod/' . $pop->slug) }}">{{ $pop->name }}</a> </h3>
                                <!-- End .product-container -->
                                <div class="price-box">
                                    <span class="product-price">{{ number_format(intval($pop->price),2) }} RSD</span>
                                </div>
                                <!-- End .price-box -->
                            </div>
                            <!-- End .product-details -->
                        </div>
                        @endforeach
    
                    </div>
                    <div class="col-md-4 col-sm-6 pb-5 appear-animate" data-animation-name="fadeInLeftShorter">
                        <h4 class="subtitle text-left text-uppercase">Najnoviji Proizvodi</h4>
                        <div class="heading-spacer"></div>
                        @foreach ($latest as $key => $pop)
                        <div class="product-default left-details product-widget mb-2">
                            <figure>
                                <a href="{{ url('proizvod/' . $pop->slug) }}">
                                    <img src="{{ (!empty($pop->img->toArray())) ? url('/') . '/product_uploads/' . $pop->img->toArray()[0]['image'] : '' }}" style="width:175px; height:175px;"alt="banner" />
                                   
                                </a>
                            </figure>
                            <div class="product-details">
                                {{-- <div class="category-list">
                                    <a href="demo8-shop.html" class="product-category">Accessories</a>
                                </div> --}}
                                <h3 class="product-title"> <a href="{{ url('proizvod/' . $pop->slug) }}">{{ $pop->name }}</a> </h3>
            
                                <!-- End .product-container -->
                                <div class="price-box">
                                    <span class="product-price">{{ number_format(intval($pop->price),2) }} RSD</span>
                                </div>
                                <!-- End .price-box -->
                            </div>
                            <!-- End .product-details -->
                        </div>
                        @endforeach
                    </div>
                </div>
                <!-- End .product-widgets -->
            </div>

            {{-- <div class="container">
                <div class="brands-section appear-animate" data-animation-delay="200" data-animation-name="fadeIn" data-animation-duration="1000">
                    <div class="brands-slider images-center owl-carousel owl-theme nav-outer show-nav-hover" data-owl-options="{
                        'margin': 0,
                        'nav': true
                    }">
                        <img src="assets/images/brands/small/brand1.png" width="140" height="60" alt="brand">
                        <img src="assets/images/brands/small/brand2.png" width="140" height="60" alt="brand">
                        <img src="assets/images/brands/small/brand3.png" width="140" height="60" alt="brand">
                        <img src="assets/images/brands/small/brand4.png" width="140" height="60" alt="brand">
                        <img src="assets/images/brands/small/brand5.png" width="140" height="60" alt="brand">
                        <img src="assets/images/brands/small/brand6.png" width="140" height="60" alt="brand">
                        <img src="assets/images/brands/small/brand4.png" width="140" height="60" alt="brand">
                    </div>
                    <!-- End .brands-slider -->
                </div>
            </div> --}}

            {{-- <div class="instagram-section appear-animate">
                <h3 class="subtitle text-uppercase">Follow On Instagram</h3>
                <div class="heading-spacer"></div>
                <div class="owl-carousel owl-theme instagram-feed-carousel instagram-feed-list">
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/1.jpg" width="197" height="150" alt="Feed"></a>
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/2.jpg" width="197" height="150" alt="Feed"></a>
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/3.jpg" width="197" height="150" alt="Feed"></a>
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/4.jpg" width="197" height="150" alt="Feed"></a>
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/5.jpg" width="197" height="150" alt="Feed"></a>
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/6.jpg" width="197" height="150" alt="Feed"></a>
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/7.jpg" width="197" height="150" alt="Feed"></a>
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/8.jpg" width="197" height="150" alt="Feed"></a>
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/9.jpg" width="197" height="150" alt="Feed"></a>
                    <a href="#"><img src="assets/images/demoes/demo8/instagram/10.jpg" width="197" height="150" alt="Feed"></a>
                </div>
                <!-- End .instagram-feed-carousel -->
            </div> --}}
            <!-- End .instagram-section -->
        </main>
        <!-- End .main -->    
@endsection