@extends('layouts/eatvio')

@section('page_title', 'Recipe ' . $recipe->title)
@php
$recipeViewsCount = views($recipe)
->unique()
->count();
$isRecipeNavigationUrlActive = true;
@endphp
@section('main_section')
<section class="content">
    <div class="content__container container-sm">
        <div class="content__heading">
            <a href="{{ route('recipe.index') }}" class="content__heading-back icon-arrow-short-left">
                <span>Рецепты</span>
            </a>
            <div class="content__heading-stats">
                <div class="content__heading-stat icon-eye-fill">
                    <strong>{{ $recipeViewsCount }}</strong>
                </div>
                <div class="content__heading-stat icon-heart-fill">
                    <strong>@livewire('recipe.like-count', ['recipe' => $recipe])</strong>
                </div>
                <div class="content__heading-stat icon-message-square">
                    <strong>{{ $recipe->comments_count }}</strong>
                </div>
            </div>
            <div class="content__person">
                <div class="content__person-name">
                    {{ $author['name'] }}
                </div>
                <div class="content__person-thumb">
                    @empty($author->profile_photo_path)
                    <img src="{{ $author->profile_photo_url }}" alt="thumb">
                    @else
                    <img src="/storage/{{ $author->profile_photo_path }}" alt="thumb">
                    @endempty
                </div>
            </div>
        </div>
    </div>
</section>
<section class="recipe">
    <div class="recipe__container container-sm">
        <div class="recipe__content">
            <div class="recipe__header">
                <div class="recipe__image" style="height: 100%;">
                    <img src="{{ Storage::url($recipe->image) }}" class="cover-image" alt="recipe">
                </div>
                <div class="recipe__body">
                    <div class="recipe__caption">
                        <h1 class="recipe__title">
                            {{ $recipe->title }}
                        </h1>

                        <div class="announcement__actions">
                            <button x-data="{ open: false }" x-on:click="open = ! open" type="button" class="announcement__actions-btn icon-more-horizontal"></button>

                            <ul class="announcement__actions-list">
                                <li class="announcement__actions-item">
                                    <a href="{{route('recipe.edit', $recipe, false)}}" class="announcement__action">Редактировать</a>
                                </li>
                                <li class="announcement__actions-item">
                                    <button type="button" class="announcement__action">О рекламодателе</button>
                                </li>
                                <li class="announcement__actions-item">
                                    <button type="button" class="announcement__action">Не интересно</button>
                                </li>
                                <li class="announcement__actions-item">
                                    <button type="button" class="announcement__action">Пожаловаться</button>
                                </li>
                                {{-- <li class="announcement__actions-item"> --}}
                                {{-- <div class="announcement__actions-id">ID: 2jkfk45JG</div> --}}
                                {{-- </li> --}}
                            </ul>

                        </div>

                    </div>
                    <div class="recipe__stats">
                        <div class="recipe__stat icon-clock">{{ __('recipe.t' . $recipe->cooking_time . 'm') }}</div>
                        <div class="recipe__stat icon-foots">{{ $recipe->steps->count() }} этапов</div>
                    </div>
                    <p class="recipe__desc">{!! $recipe->description !!}</p>
                    @if (strlen(trim($recipe->video_url)) > 4)
                    <a target="_blank" rel="noopener noreferrer" href="{{ $recipe->video_url }}" class="recipe__link icon-youtube">Посмотреть рецепт на YouTube</a>
                    @endif
                </div>
            </div>
            <div class="recipe__info">
                <div class="recipe__info-column">
                    <div class="recipe__info-caption">
                        ПРОДУКТЫ:
                    </div>
                    <ul class="recipe__info-list marked">
                        @foreach ($recipe->ingredients as $ingredient)
                        @php
                        $localizedUnit = isset($ingredient['unit']) && mb_strlen($ingredient['unit']) > 1 ? $ingredient['unit'] : 'gr';
                        @endphp
                        @if (mb_strlen($ingredient['name']) > 1)
                        <li>{{ $ingredient['name'] }} - {{ $ingredient['portion'] }}
                            {{ __('recipe.' . $localizedUnit) }}
                        </li>
                        @endif
                        @endforeach
                    </ul>
                </div>
                <div class="recipe__info-column">
                    <div class="recipe__info-caption">
                        ЦЕННОСТЬ:
                    </div>
                    <ul class="recipe__info-list">
                        <li>WIP</li>
                        {{--
	                  <li>Калории: 139.9 ккал</li>
                  <li>Белки: 20.4 гр</li>
                  <li>Жиры: 5.7 гр</li>
                  <li>Углеводы: 1.8 гр</li>
	                    --}}
                    </ul>
                </div>
                <div class="recipe__info-column">
                    <div class="recipe__info-caption">
                        ЦЕННОСТЬ:
                    </div>
                    <div class="recipe__info-tags">
                        @foreach ($recipe->tags->unique() as $curTag)
                        <a href="{{ $curTag->recipe_index_url }}" class="recipe__info-tag">{{ $curTag->name }}</a>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="recipe__footer">
                <a href="#commentsList" class="recipe__footer-action icon-message-square">
                    <span>Комментировать</span>
                </a>
                @livewire('recipe.like', ['recipe' => $recipe])
                {{-- <button class="recipe__footer-action icon-heart"> --}}
                {{-- <span>Нравится</span> --}}
                {{-- </button> --}}
                <button class="recipe__footer-action icon-share">
                    <span>Поделится</span>
                </button>
            </div>
        </div>
    </div>
</section>
<section class="steps">
    <div class="steps__container container-sm">
        <h2 class="steps__title title">
            ПОШАГОВЫЙ ФОТО РЕЦЕПТ - {{ $recipe->title }}
        </h2>
        <ol class="steps__list">
            @foreach ($recipe->steps as $step)
            <li class="steps__item">
                <div class="steps__item-image">
                    @if (isset($step['image']) && is_string($step['image']) && strlen($step['image']) > 4)
                    <img src="/storage/{{ $step['image'] }}" class="cover-image" alt="step">
                    @endif
                </div>
                <div class="steps__item-text">
                    <small>
                        {!! $step['description'] !!}
                    </small>
                </div>
            </li>
            @endforeach

            {{-- <li class="steps__item">
	              <div class="steps__item-image">
	                <img src="img/price_step_1.jpg" class="cover-image" alt="step">
	              </div>
	              <div class="steps__item-text">
	                Режем куриную грудку тонкими ломтиками.
	              </div>
	            </li>
	            <li class="steps__item">
	              <div class="steps__item-image">
	                <img src="img/price_step_2.jpg" class="cover-image" alt="step">
	              </div>
	              <div class="steps__item-text">
	                <p>
                  На край каждого кусочка филе кладем 1 ст. л. тертого сыра и порезанную зелень.
	                </p>
	                <p>
                  Формируем рулетик из куриного филе с сыром и зеленью, подворачивая с боков, чтобы сыр при приготовлении не вытек. Скрепляем края половинками зубочисток.
	                </p>
	              </div>
	            </li> --}}
        </ol>
    </div>
</section>

<section class="reviews">
    <div class="reviews__container container-sm">
        <h2 class="reviews__title title">
            ОТЗЫВЫ
        </h2>

        @livewire('recipe.comment.show', ['recipe' => $recipe])
        @auth
        @livewire('recipe.comment.create', ['recipe' => $recipe, 'user' => Auth::user()])
        @endauth
    </div>
</section>
@endsection