@extends('layouts.site')

@section('title', 'Receitas')

@section('receitas', '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/receitas-bg.png') }}" alt="Card image" style="width:100%; opacity: 0.4;">
    <h4 class="card-title text" style="font-family: 'teste', sans-serif;"><b>RECEITAS</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($recipes) > 0 )

                    @foreach ($recipes as $recipe)
                    <div class="row">
                        <div class="col box-receitas">
                            <a href="recipe/{{ $recipe->id }}" style="text-decoration: none;">
                                <center><img src="{{ asset($recipe->url_image) }}" class="img-fluid" alt="APP" />
                                </center>
                            </a>
                        </div>
                        <div class="w-100"></div>
                        <div class="col receitas-down">

                            <a href="recipe/{{ $recipe->id }}" style="color: black;">
                                <h3><b>{{ $recipe->title }}</b></h3> <h6><i class="fas fa-clock"></i> {{ $recipe->time_duration }}  &nbsp;&nbsp;  <i class="fas fa-utensils"></i> {{ $recipe->yield }} porções</h6><br />
                            </a>
                            <a href="recipe/{{ $recipe->id }}" style="color: black;">
                                <p>{{ $recipe->description }}</p>
                            </a>
                            <a href="recipe/{{ $recipe->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 ($recipesLast as $recipesLast)
                    <a href="#" style="text-decoration: none;">
                        <h6 style="color:black">{{ $recipesLast->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 ($recipes as $recipe)
                    <a href="#" style="text-decoration: none;">
                        <h6 style="color:black">{{ $recipe->tag }}</h6>
                    </a>
                    @endforeach
                    <br />

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

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

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