@extends('layouts/app')

@section('title')
    Produtos
@endsection

@section('content')
    <section id="main-banner-page" class="position-relative page-header shop-header section-nav-smooth parallax" style="background-image: url({{asset('images/bg-shop-header.jpg')}}'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center 32.67px; margin-top: 0px;">
        <div class="overlay overlay-dark opacity-6 z-index-1"></div>
        <div class="container">
           <div class="row">
              <div class="col-lg-8 offset-lg-2">
                 <div class="page-titles whitecolor text-center padding_top padding_bottom">
                    <h2 class="font-xlight">Build Your</h2>
                    <h2 class="font-bold">Creative Shopping Page</h2>
                    <h2 class="font-xlight">In Market</h2>
                    <h3 class="font-light pt-2">The Best Multipurpose Creative & Parallax Template</h3>
                 </div>
              </div>
           </div>
           <div class="gradient-bg title-wrap">
              <div class="row">
                 <div class="col-lg-12 col-md-12 whitecolor">
                    <h3 class="float-left">Produtos</h3>
                    <ul class="breadcrumb top10 bottom10 float-right">
                       <li class="breadcrumb-item hover-light"><a href="/">Início</a></li>
                       <li class="breadcrumb-item hover-light">Produtos</li>
                    </ul>
                 </div>
              </div>
           </div>
        </div>
    </section>

    <section class="padding">
        <div class="container">
            @if (count($products) > 0)
                <div class="row">
                    @foreach ($products as $product)
                                                <div class="col-lg-4 col-md-6 col-sm-6 wow fadeIn" data-wow-delay="{{$delay}}ms" style="visibility: visible; animation-delay: {{$delay}}ms; animation-name: fadeIn;">
                            <div class="shopping-box bottom30">
                                <div class="image">
                                    <img src="images/shop-1.jpg" alt="{{$product->title}}">
                                    <div class="overlay center-block">
                                        <a class="opens" href="shop-cart.html" title="Adicionar ao carrinho"><i class="fa fa-shopping-cart"></i></a>
                                    </div>
                                </div>
                                <div class="shop-content text-center">
                                    <h4 class="darkcolor"><a href="/produtos/{{$product->id}}">{{$product->title}}</a></h4>
                                    <p>{{$product->description}}</p>
                                    <h4 class="price-product">€{{$product->price}}</h4>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <div class="center">{{$products->links()}}</div>
                </div>
            @else
                <p>No products found :(</p>
                <a class="button btn-primary" href="/produtos/novo">Novo Produto</a>
            @endif
        </div>
    </section>
@endsection