@extends('layouts.site')

@section('title', 'Dicas')

@section('conteudo', 'active')
@section('head')
<style>
@font-face {
  font-family: 'teste';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
</style>
@endsection
@section('content')

    <div class="card-img-overlay box" style="padding: 0;">
        <img class="card-img-top" src="{{ asset('images/dicas-bg.png') }}" alt="Card image"
            style="width:100%; opacity: 0.4;">
        <h4 class="card-title text"  style="font-family: 'teste', sans-serif;"><b>DICAS E NOVIDADES</b></h4>
    </div>
    <div class="bg-dark">
        <center>
            <div class="" style=" border: 6px #F37314 solid; background-color: #F37314;"></div>
        </center>
    </div>
    <div class="background-bg" style="padding-top: 5%; padding-bottom: 5%;">
        <div class="container-xl">
            <div class="row">
                <div class="col-sm-8">
                    <div class="container">
                        @if(count($tips) > 0 )

                        @foreach ($tips as $tip)
                            <div class="row">
                                <div class="col box-receitas">
                                    <center><img src="{{ asset($tip->url_image) }}" class="img-fluid" alt="APP" />
                                    </center>
                                </div>
                                <div class="w-100"></div>
                                <div class="col receitas-down">

                                    <h3><b>{{ $tip->title }}</b></h3>
                                    <p>{{ $tip->description }}</p>
                                    <a href="dica/{{ $tip->id }}" style="text-decoration: none;">
                                        <h6 style="color:#F37314;">VER MAIS...</h6>
                                    </a>
                                </div>
                            </div>
                        @endforeach

                        @else
                            nenhum resultado encontrado
                        @endif
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="menu-receitas">
                        <!-- <center> -->

                        {!! Form::open(['method' => 'GET', 'url' => '#', 'class' => 'navbar-form navbar-left', 'role' => 'search']) !!}
                        <div class="input-group custom-search-form">
                            <input type="text"
                            style="border:1px solid #F37314; border-radius: 20px; background-color: E6E6E6; text-align: center; padding:1.5%;"
                            size=30 name="search" placeholder="Pesquisar">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-default-sm">
                                    <!-- <i class="fa fa-search"></i> -->
                                </button>
                            </span>
                        </div>
                        {!! Form::close() !!}

                        
                        <!-- </center> -->

                        <br /><br />
                        <h4><b>CATEGORIA</b></h4>
                        <br />
                        <a href="#" style="text-decoration: none;">
                            <h6 style="color:black">Massa</h6>
                        </a>
                        <a href="#" style="text-decoration: none;">
                            <h6 style="color:black">Carne</h6>
                        </a>
                        <a href="#" style="text-decoration: none;">
                            <h6 style="color:black">Doces</h6>
                        </a>
                        <a href="#" style="text-decoration: none;">
                            <h6 style="color:black">Saladas</h6>
                        </a>
                        <br />
                        <div class="" style="border: 1px #F37314 solid; width: 50%; opacity: 0.7"></div>

                        <br /><br />
                        <h4><b>Publicado recentemente</b></h4>
                        <br />
                        @foreach ($tipsLast as $tipsLast)
                            <a href="#" style="text-decoration: none;">
                                <h6 style="color:black">{{ $tipsLast->title }}</h6>
                            </a>
                        @endforeach
                        <br />
                        <div class="" style="border: 1px #F37314 solid; width: 50%; opacity: 0.7"></div>

                        <br /><br />
                        <h4><b>TAGs</b></h4>
                        <br />
                        @foreach ($tips as $tip)
                            <a href="#" style="text-decoration: none;">
                                <h6 style="color:black">{{ $tip->tag }}</h6>
                            </a>
                        @endforeach
                        <br />

                    </div>
                </div>
                <div class="col-12">

                    <div class="d-flex justify-content-center">
                        {!! $tips->links('vendor.pagination.custom') !!}
                    </div>
                </div>

            </div>
        </div>
    </div>
@stop