@extends('apex-layouts.main')

@section('content')
    <section id="fabs-examples">
        <div class="card">
            <div class="card-body">
                <div class="card-block">
                    <div class="row">
                        <div class="col-lg-7 col-md-12 col-sm-12">
                            <div class="row">
                                <div class="col-sm-8">
                                    <h4 class="card-title">{{ $model->title }}</h4>
                                </div>
                                <div class="col-sm-4">
                                    <code class="text-warning float-right">{{$model->caloriesTotal}} CAL</code>
                                    <br>
                                    <code class="text-warning float-right">
                                        Review
                                        <a class="info p-0" href="{{ route('orders.recipeReview', $model->id) }}"
                                           data-original-title="" title="Recipe Review">
                                            <i class="ft-fast-forward "></i>
                                        </a>
                                    </code>
                                </div>
                            </div>
                            <hr/>
                            <h4 class="clearfix">{{ 'Ingredients' }}
                            </h4>
                            <p class="card-text text-muted">
                                @foreach($model->ingredients as $ingredient)
                                    <mark>{{$ingredient->name}}</mark>
                                @endforeach
                            </p>
                            <code class="text-warning">CUISINES</code>: <strong>{{$model->cuisines}}</strong>
                            <hr/>
                            <p class="card-text text-muted text-justify">
                                {{$model->description}}
                            </p>

                        </div>
                        <div class="col-lg-5 col-md-12 col-sm-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-img">
                                        <img class="card-img-top img-fluid"
                                             data-src="{{($model->logo)?env("IMAGE_URL")."/".$model->logo:URL::asset(config("params")['images']["recipe"])}}"
                                             alt="{{$model->title}}}">
                                        <h4 class="card-title">{{$model->title}}</h4>

                                    </div>
                                    <div class="card-block">
                                        <ul class="list-group">
                                            <li class="list-group-item">
                                                <span class="float-right"><span
                                                        class="badge badge-light">{{$model->ingredients()->sum("grams")}}g</span></span>
                                                <p class="card-text text-muted">Amount Per</p>
                                            </li>

                                            @foreach($model->nutritionFacts as $nutrition)
                                                <li class="list-group-item">
                                                <span class="float-right"><span
                                                        class="badge badge-light">{{$nutrition->value.$nutrition->unit}}</span></span>
                                                    <p class="card-text text-muted">{{$nutrition->title}}</p>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

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

@endsection

@section('scripts')

@stop

@section('styles')

@stop