@section('content')
    <article id="home">
        <div class="slider owl-carousel">
            @foreach($page->post->media()->notFeatured()->get()->sortBy('post.order') as $medium)
                <div class="item">
                    <img src="{{ asset($medium->post->image) }}" alt="" class="cover">
                </div>
            @endforeach
        </div>
        <section class="categories">
            <div class="container">
                <div class="row row-grid justify-content-center">
                    @foreach($categories as $category)
                        <div class="col-xl-2 col-md-4 col-6">
                            <a href="{{ route('category', $category->slug) }}">
                                <div class="img-holder img-full">
                                    <img src="{{ asset($category->image) }}" alt="" class="absolute">
                                </div>
                                <h3>{{ $category->title }}</h3>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
        <section class="latest">
            <div class="container">
                <h2>Conozca nuestras novedades</h2>
                <p>Una correcta iluminación hace cada espacio único. </p>
                <div class="row-container">
                    <div class="row row-grid justify-content-center">
                        @foreach($latest_products as $product)
                            <div class="col-md-4 col-6">
                                @include('partials.card')
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        @if($section = $page->getSections('categories')->values()[0])
            <section class="collection">
                <div class="container">
                    <h2>{{ $section->post->title }}</h2>
                    <div class="row row-grid">
                        <div class="col-12">
                            <h4>{{ $section->post->excerpt }}</h4>
                        </div>
                        @foreach($section->images as $medium)
                            <div class="col-md-6">
                                <img src="{{ asset($medium->post->image) }}" alt="" class="img-fluid">
                                <div class="content-html">
                                    {!! $medium->post->content !!}
                                </div>
                                @if($medium->url)
                                    <div class="btn-container">
                                        <a href="{{ url($medium->url) }}" class="btn">
                                            <span>{{ $medium->post->excerpt ?? 'Ver más' }}</span>
                                            <i class="far fa-arrow-right"></i>
                                        </a>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif
        @if($section = $page->getSection('slides'))
            <div class="slides owl-carousel">
                @foreach($section->images as $medium)
                    <div class="item">
                        <img src="{{ asset($medium->post->image) }}" alt="" class="cover">
                    </div>
                @endforeach
            </div>
        @endif
        @if($section = $page->getSections('categories')->values()[1])
            <section class="collection" >
                <div class="container">
                    <h2>{{ $section->post->title }}</h2>
                    <div class="row row-grid">
                        <div class="col-12">
                            <h4>{{ $section->post->excerpt }}</h4>
                        </div>
                        @foreach($section->images as $medium)
                        <div class="col-md-6">
                            <img src="{{ asset($medium->post->image) }}" alt="" class="img-fluid">
                            <div class="content-html">
                                {!! $medium->post->content !!}
                            </div>
                            @if($medium->url)
                                <div class="btn-container">
                                    <a href="{{ url($medium->url) }}" class="btn">
                                        <span>{{ $medium->post->excerpt ?? 'Ver más' }}</span>
                                        <i class="far fa-arrow-right"></i>
                                    </a>
                                </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif
        <section class="articles">
            <div class="row row-grid">
                @foreach($articles as $article)
                    <div class="col-lg-3 col-md-6">
                        <a href="#">
                            <div class="img-holder">
                                <img src="{{ asset($article->image) }}" alt="" class="cover">
                            </div>
                            <div class="inner-container">
                                <h4>{{ $article->short_time }}</h4>
                                <h3>{{ $article->post->title }}</h3>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </section>
        @if($section = $page->getSection('bienvenida'))
            <section class="content bienvenida">
                <div class="container">
                    <div class="row row-grid align-items-center">
                        <div class="col-md-5">
                            <img src="{{ asset($section->image->post->image) }}" alt="" class="img-fluid">
                        </div>
                        <div class="col-md-6 offset-md-1">
                            <h1>{{ $section->post->title }}</h1>
                            <div class="content-html">
                                {!! $section->post->content !!}
                            </div>
                            @if($section->url)
                                <div class="btn-container">
                                    <a href="{{ url($section->url) }}" class="btn">
                                        <span>{{ $section->post->excerpt ?? 'Ver más' }}</span>
                                        <i class="far fa-arrow-right"></i>
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </section>
        @endif
        <section class="latest">
            <div class="container">
                <h2>Destacados</h2>
                <p>Una correcta iluminación hace cada espacio único. </p>
                <div class="row-container">
                    <div class="row row-grid justify-content-center">
                        @foreach($featured_products as $product)
                            <div class="col-md-4 col-6">
                                @include('partials.card')
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        <section class="icons">
            <div class="container">
                <div class="row row-grid">
                    <div class="col-md-3 col-sm-6">
                        <div class="d-flex align-items-center">
                            <i class="far fa-exchange"></i>
                            <span><b>5 días</b> Políticas de recambio</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="d-flex align-items-center">
                            <i class="far fa-truck"></i>
                            <span><b>Delivery</b> Garantizado</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="d-flex align-items-center">
                            <i class="far fa-shopping-bag"></i>
                            <span><b>Seguridad</b> en tus compras</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="d-flex align-items-center">
                            <i class="far fa-ear-muffs"></i>
                            <span><b>Consultas al</b> 0981641554</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
@endsection

@push('scripts')
    <script>
      $(function() {
        $('.slider').owlCarousel({
          loop: true,
          items: 1,
          nav: true,
          navText: ['<i class="far fa-arrow-left"></i>', '<i class="far fa-arrow-right"></i>'],
          dots: true,
          autoplay: true,
          autoplayHoverPause: true
        });

        $('.slides').owlCarousel({
          loop: true,
          items: 2,
          nav: false,
          dots: false,
          autoplay: true,
          autoplayHoverPause: true,
          autoWidth: true,
          margin: 5
        });
      });
    </script>
@endpush