@section('metatags')
<meta name="description" content="Comércio de ferramentas e acessórios. Representantes oficiais das marcas Bosch, Still e Viking. Assistência técnica especializada.">
<meta property="og:title" content="Beirateca - Ferramentas e Acessórios">
<meta property="og:description" content="Comércio de ferramentas e acessórios. Representantes oficiais das marcas Bosch, Still e Viking. Assistência técnica especializada.">
<meta property="og:image" content="{{ asset('assets/img/og_image.png') }}">
@stop

@section('content')
<div class="row">
    <div class="col-lg-9 col-md-offset-3">
        @if(!$banners->isEmpty())
        <div id="slider" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators hidden-xs">
                @foreach($banners as $key => $image)
                @if($key == 0)
                <li data-target="#slider" data-slide-to="{{ $key }}" class="active"></li>
                @else
                <li data-target="#slider" data-slide-to="{{ $key }}"></li>
                @endif
                @endforeach
            </ol>
            <div class="carousel-inner" role="listbox">
                @foreach($banners as $key => $image)
                @if($key == 0)
                <div class="item active">
                    @else
                    <div class="item">
                        @endif
                        
                        @if($image->url)
                        <a href="{{ $image->url }}" target="_blank">
                            <img src="{{ asset($image->getCroppa(845, 400)) }}" class="width-100" onerror="this.onerror=null;this.src='{{ asset($image->getOriginalFileUrl()) }}';">
                        </a>
                        @else
                            <img src="{{ asset($image->getCroppa(845, 400)) }}" class="width-100" onerror="this.onerror=null;this.src='{{ asset($image->getOriginalFileUrl()) }}';">
                        @endif
                        
                        @if($image->caption)
                        <div class="carousel-caption">{{ $image->caption }}</div>
                        @endif
                    </div>
                    @endforeach
                </div>

                <a class="left carousel-control" href="#slider" role="button" data-slide="prev">
                    <span class="fa fa-angle-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#slider" role="button" data-slide="next">
                    <span class="fa fa-angle-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
        </div>
        @endif
    </div>
</div>
<div class="spacer-15"></div>
@include('partials.brandsSection')
<div class="spacer-30"></div>
<section>
    <div class="row">
        <div class="col-sm-8 col-md-9">
            <div class="panel">
                <div class="panel-heading">
                    <h4>Novidades e Promoções</h4>
                    <a href="{{ route('promotions.index') }}" class="more">Ver tudo</a>
                </div>
                <div class="panel-body padding-left-0 padding-right-0">
                    <div class="row row-10">
                    @foreach($products as $product)
                        <div class="col-sm-6 col-md-4 col-lg-3">
                        @include('products.partials.item')
                        </div>
                    @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <div class="panel panel-bordered">
                <div class="panel-heading">
                    <h4>Top Vendas</h4>
                    <a href="{{ route('topsales.index') }}" class="more">Ver tudo</a>
                </div>
                <div class="panel-body padding-0">
                    @foreach($topSales as $product)
                        @include('products.partials.sidebarItem')
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
@stop