@extends('layouts.site')

@section('title', 'Receita')

@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($recipe->url_image) }}" alt="Card image"
            style="width:100%; opacity: 0.4; max-height:400px">
        <h4 class="card-title text"  style="font-family: 'teste', sans-serif;"><b>{{ $recipe->title }}</b></h4>
        <h6 class="card-subtitle text" style="font-size: 1.3rem;"><a href="{{ url('receitas') }}"
                style="color: black !important">Receitas</a> / {{ $recipe->title }}</h6>
    </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-4">
                    <div class="menu-receita-left">
                        <h3><b>INGREDIENTES</b></h3>
                        <br />
                        @foreach (explode(',', $recipe->list_ingredients) as $ingredient)
                            <h5 style="color:black">- {{ $ingredient }}</h5>
                        @endforeach
                        <br />

                        @if ($recipe->url_place != '')
                            <h5> Você pode comprar todos os
                                ingredientes dessa receita na loja
                                online clicando no botão abaixo</h5>

                            <a href="{{ $recipe->url_place }}" target="_blank" class="mt-0"
                                style="text-decoration: none;">
                                <button class="btn btn-danger my-2 my-sm-0 rounded-lg button-delivery-footer" type="submit"
                                    style="font-size: 1rem;">COMPRE ONLINE</button>
                            </a>
                        @endif
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="container">
                        <h4>Tempo de preparo: {{ $recipe->time_duration }}</h4>
                        <h4>Rendimeto: {{ $recipe->yield }} porções</h4>
                        <br /><br />

                        @if ($recipe->url_video != '')
                            <div class="youtube_video">
                                <iframe width="100%" height="400" class="embed-responsive-item"
                                    src="{{ $recipe->url_video }}" title="YouTube video player" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen></iframe>
                            </div>
                        @endif
                        <br />
                        {{ $recipe->body }}
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container-sm">
        <br /><br />
        <center>
            <h2><b>RECEITAS RELACIONADAS</b></h2>
        </center>
        <div class="row" style="padding:2% 10% 10% 10%">
            @foreach ($relateds as $related)
                <div class="col-sm">
                    <div class="" style="border: 1px solid #F37314; padding:8%; border-radius: 30px">
                        <img src="{{ asset($related->url_image) }}" class="img-fluid" alt="APP" />
                    </div>
                    <div class="">
                        <br />
                        <center>
                            <a href="{{ route('receita', ['id' => $related->id]) }}" style="color: black;">
                                <h4>{{ $related->title }}</h4>
                            </a>
                        </center>
                    </div>

                </div>
            @endforeach
            <div class="container-sm">
                <div class="row" style="padding:2% 10% 10% 10%">
                    @foreach ($comments as $comment)
                        <div class="col-sm">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-subtitle mb-2 text-muted">{{ $comment->name }}</h6>
                                    {{ $comment->message }}
                                </div>
                            </div>
                        </div>
                        <div class="w-100 d-none d-md-block"></div>
                    @endforeach
                </div>
                <br />
                <center>
                    <h2><b>DEIXE SEU COMENTÁRIO</b></h2>
                </center>
                <div class="w-100 d-none d-md-block"></div>
                @if ($errors->any())
                    @foreach ($errors->all() as $error)
                        <div class="alert alert-danger" role="alert">
                            {{ $error }}
                        </div>
                    @endforeach
                @endif
                <form method="post" action="{{ route('comment.recipe.store') }}">
                    @csrf
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <input type="text" class="form-control input-dodia" id="inputEmail4" name="name" placeholder="Nome">
                        </div>
                        <div class="form-group col-md-6">
                            <input type="text" class="form-control input-dodia" id="inputPassword4" name="phone"
                                placeholder="Telefone">
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control input-dodia" id="email" name="email" placeholder="Email">
                    </div>

                    <div class="form-group">
                        <textarea class="form-control input-dodia" id="exampleFormControlTextarea1" name="message"
                            rows="3">Mensagem</textarea>
                    </div>

                    <input type="hidden" name="id_recipe" value="{{ $recipe->id }}">

                    <button type="submit" class="btn btn-danger button-delivery">Enviar</button>
                </form>
            </div>
        </div>
    @stop