@extends('layouts.app')

@section('title', $recipe->title)

@section('content')
<!-- =======================
Main Banner START -->
<section class=" bg-white overflow-hidden pt-xl-9">
    <div class="container">
        <div class="">
        <div class="text-center">
            <img class="border-round-md" src="{{asset($recipe->image)}}" style="max-height:300px ; height: auto; width: auto;">

            <!-- Title and content -->
            <h2 class="text-primary">{{$recipe->title}}</h2>
            <!-- Buttons -->
            </div>
        </div>

            <!-- Title and content -->

            <!-- Buttons -->

        </div>
        <div class="row mx-xl-9 align-items-center mt-4 mt-xl-7">
            <div class="col-md-4">
                <div class="row align-items-center">
                    <div class="col-6 text-end">
                        <img class="" src="{{asset('img/recipe/toge.svg')}}">
                    </div>
                    <div class="col-6">
                        <p class="text-small p-0 m-0">Temps de préparation</p>
                        <p class="exerge">{{ $recipe->preparation_time}} min</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="row align-items-center">
                    <div class="col-6 text-end">
                        <img class="" src="{{asset('img/recipe/horloge.svg')}}">
                    </div>
                    <div class="col-6">
                        <p class="text-small p-0 m-0">Temps de cuisson</p>
                        <p class="exerge">{{ $recipe->cooking_time}} min</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="row align-items-center">
                    <div class="col-6 text-end">
                        <img class="" src="{{asset('img/recipe/couverts.svg')}}">
                    </div>
                    <div class="col-6">
                        <p class="text-small p-0 m-0">Portions</p>
                        <p class="exerge">{{ $recipe->persons}} personnes</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mx-md-3 mx-xl-9 mt-7 text-center text-md-start">
            <div class="col-md-6 mb-4">
                <h5 class="text-blue">Les ingrédients</h5>
                @foreach ($recipe->ingredients as $ingredient )
                <p class="text-black m-1"> {{$ingredient->text}}</p>
                @endforeach
            </div>
            <div class="col-md-6">
                <h5 class="text-blue">Déroulé</h5>
                @foreach ($recipe->stages as $stage )
                <p class="text-black m-1">{{ $loop->iteration }} . {{$stage->text}}</p>
                @endforeach
            </div>
        </div>
    </div>
</section>
<div class="position-relative">
    <div class="position-absolute start-50 ms-md-9 mt-n7 mt-md-n8 mt-xl-n7 z-index-2" style="transform: translateX(2.52222px) translateY(4.7px);">
        <img src="{{asset('img/recipe/tomate.svg')}}" class="rounded-4" alt="decoration-img">
    </div>
</div>
<section class=" bg-blue pb-5">
    <div class="container">
        <h4 class="mb-5 text-dark text-center">Vous aimerez aussi</h4>
    </div>

    @include('layouts.slider', [
		'id' => 'unique-slider-id-1',
		'items' => $recipes,
		'card' => 'layouts.card_blog_white',
		'btn' => 'btn-transparent'
		])
    
    <div class="container text-center mt-5">
        <a href="{{route('blog')}}" class="btn btn-green btn-lg">Voir plus de recettes</a>
    </div>
</section>
<div class="position-relative">
    <div class="position-absolute start-0 ms-9 mt-n8 z-index-2" style="transform: translateX(2.52222px) translateY(4.7px); height: 100px ; width :200px;">
        <img src="{{asset('img/recipe/roquette.svg')}}" class="rounded-4" alt="decoration-img">
    </div>
</div>
@endsection