@extends('layouts.front.app')

@section('og')
    <meta property="og:type" content="home"/>
    <meta property="og:title" content="{{ config('app.name') }} - Home"/>
    <meta property="og:description" content="{{ config('app.description') }}"/>
@endsection
@section('css')
    <style type="text/css">
        .flex-1 {
            flex: 1;
        }
    </style>
@endsection

@section('content')
    {{-- dd($cat) --}}
    <section class="text-center my-2 section-my">
        <!-- Menu Superior -->
        <div class="container h-100">

            <!-- MenuSuperior-->
            @include('layouts.front.menu-superior')
            <!--/.MenuSuperior-->
        </div>
        <!-- /.Menu Superior -->
        <div class="opera">
            <div class="w-100 h-80 d-inline-block bg carousel-banner">
                <div class="w-100 h-20 d-inline-block">
                    <!-- Banner Principal -->

                    @include('layouts.front.banner-principal')
                    <!-- /.Banner Principal -->
                </div>
            </div>
            <div class="w-100 h-20 d-inline-block red darken-4">
                <div class="w-20 h-20 d-inline-block"></div>
                <div class="w-80 h-20 d-inline-block">
                    <!-- Menu Banner -->
                    @include('layouts.front.menu-banner')
                    <!-- /.Menu Banner -->
                </div>
                <div class="w-20 h-20 d-inline-block"></div>
            </div>
        </div>
        <div class="container w-100 h-20 d-inline-block banner-parceiros">
            <!-- Menu Parceiros -->
            @include('layouts.front.banner-parceiros')
            <!-- /.Menu Parceiros -->
        </div>
    </section>
    <!--Section: Products v.3-->
    <section class="text-center mb-4">
        <div class="container-fluid div-produtos">
            <!--Grid row-->
                @if($cat->count() > 0)
                    @foreach($cat as $categoria)
                        @if ($categoria->products->count() > 0 )
                            <div class="navbar-opera rounded container z-depth-2 pointer link-categoria" data-href="{{ route('front.category.slug', $categoria->slug) }}">
                                <span class="h2-responsive">{{ $categoria->name }}</span>
                                <a class="ver-mais float-right" href="{{ route('front.category.slug', $categoria->slug) }}" role="button">Ver mais...</a>
                            </div>
                            <!-- Container -->
                            <div class="row wow fadeIn justify-content-center">
                                @include('front.products.product-list', ['products' => $categoria->products->where('status', 1)->take(5)])
                            </div>
                            <!-- Container -->
                        @endif
                    @endforeach
                @endif
            <!--Grid row-->
        </div>
    </section>
    <!-- /.Section: Products v.3-->
    <section class="text-center mb-4">
        @include('layouts.front.banner-destaque')
    </section>
    @if(env('ATIVA_DEPOIMENTOS'))
        <section class="text-center mb-4">
            @include('layouts.front.comments')
        </section>
    @endif
    @if(env('ATIVA_NEWSLETTER'))
        @include('mailchimp::mailchimp')
    @endif
@endsection
@section('js')
    <script type="text/javascript">
        $(document).ready(function () {
            $('.carousel').carousel()
            $('ul.navbar-nav li.dropdown').hover(function() {
                $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
              }, function() {
                $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
              });
            $('.link-categoria').on('click', function(){
                window.location.href = $(this).data('href');
            })
        })
    </script>
@endsection