@extends('layouts/eatvio')

@section('page_title', 'Recipe ' . $recipe->title)
@php
$recipeViewsCount = views($recipe)->unique()->count();
@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">
                <img src="/storage/{{ $recipe->image }}" class="cover-image" alt="recipe">
              </div>
              <div class="recipe__body">
                <div class="recipe__caption">
                  <h1 class="recipe__title">
                    {{ $recipe->title }}
                  </h1>
                  <button type="button" class="recipe__action icon-dotts"></button>
                </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">
            ПОШАГОВЫЙ ФОТО РЕЦЕПТ - КУРИНЫЕ РУЛЕТИКИ С СЫРОМ
          </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>
          <div class="reviews__tabs tabs">
            <div class="tablist" role="tablist" aria-labelledby="label">
              <button class="tab" role="tab" type="button" id="tab-1" aria-selected="true" aria-controls="tabpanel-1">Положительные 2</button>
              <button class="tab" role="tab" type="button" id="tab-2" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">Негативные 1</button>
            </div>
            <div class="tabpanel" role="tabpanel" id="tabpanel-1" tabindex="0" aria-labelledby="tab-1">
              <div class="reviews__items">
                <div class="review">
                  <div class="review__thumb">
                    <img src="img/user.png" class="cover-image" alt="user">
                  </div>
                  <div class="review__content">
                    <div class="review__name">
                      Артём
                    </div>
                    <blockquote class="review__quote">
                      После данного плана питания стал чувствовать себя куда лучше! Обязательно продолжу работать с Дмитрием!
                    </blockquote>
                  </div>
                  <div class="review__info">
                    <div class="review__programm">
                      Лёгкий
                    </div>
                    <div class="review__rate icon-star">
                      5.0
                    </div>
                  </div>
                </div>
                <div class="review">
                  <div class="review__thumb">
                    <img src="img/user.png" class="cover-image" alt="user">
                  </div>
                  <div class="review__content">
                    <div class="review__name">
                      Артём
                    </div>
                    <blockquote class="review__quote">
                      После данного плана питания стал чувствовать себя куда лучше! Обязательно продолжу работать с Дмитрием!
                    </blockquote>
                  </div>
                  <div class="review__info">
                    <div class="review__programm">
                      Лёгкий
                    </div>
                    <div class="review__rate icon-star">
                      5.0
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tabpanel" role="tabpanel" id="tabpanel-2" tabindex="0" aria-labelledby="tab-2">
              <div class="reviews__items">
                <div class="review">
                  <div class="review__thumb">
                    <img src="img/user.png" class="cover-image" alt="user">
                  </div>
                  <div class="review__content">
                    <div class="review__name">
                      Артём
                    </div>
                    <blockquote class="review__quote">
                      Курить план – это плохо! Гласит лозунг и кричит Минздрав. Ну, конечно …Ничем не хуже водки, а водку везде продают и ничего.. ... Говорят, некоторые годами курят план и живут нормальной жизнью…Ну, если они считают это нормальной жизнью, то пусть и дальше существуют…Я не хочу…Я теперь спрашиваю себя – а зачем мне жить, что б просто курить траву?..Теперь мне плохо и траву курить, Проклятый мир! Даже год не покурил… Мне нужно что-то получше.. почище….ярче!!!
                    </blockquote>
                  </div>
                  <div class="review__info">
                    <div class="review__programm">
                      Лёгкий
                    </div>
                    <div class="review__rate icon-star">
                      5.0
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <form action="" class="reviews__form">
            <textarea class="textarea textarea-white" placeholder="Введите отзыв"></textarea>
            <div class="reviews__form-column">
              <div class="reviews__form-rate star-rating">
    <input type="radio" name="rate" id="rate-5" value="5" class="star-rating__input hidden" hidden>
    <label class="star-rating__label" for="rate-5"></label>
    <input type="radio" name="rate" id="rate-4" value="4" class="star-rating__input hidden" hidden>
    <label class="star-rating__label" for="rate-4"></label>
    <input type="radio" name="rate" id="rate-3" value="3" class="star-rating__input hidden" hidden>
    <label class="star-rating__label" for="rate-3"></label>
    <input type="radio" name="rate" id="rate-2" value="2" class="star-rating__input hidden" hidden>
    <label class="star-rating__label" for="rate-2"></label>
    <input type="radio" name="rate" id="rate-1" value="1" class="star-rating__input hidden" hidden>
    <label class="star-rating__label" for="rate-1"></label>
</div>
              <button type="button" class="btn btn-primary">Оставить отзыв</button>
            </div>
          </form>
        </div>
      </section>

<section class="py-5" id="main">
    <div class="container d-flex justify-content-between align-items-center flex-nowrap mb-4 px-4 py-3 --bg_white --shadow --radius --mw-1000 --f_bold --f_main overflow-x-xs-scroll">
        <a href="{{ route('recipe.index') }}" class="d-flex w-2/5 align-items-center --f_bold">
            <svg width="17" height="16" class="me-2">
                <use xlink:href="#GoBack"></use>
            </svg>
            <span class="d-none d-md-inline --f_main">Рецепты</span>
        </a>
        <div class="d-flex align-items-center fs-6">
            <svg width="20" height="14" class="me-2">
                <use xlink:href="#Eye_Black"></use>
            </svg>
            <span class="me-4">{{ $recipeViewsCount }}</span>
            <svg width="16" height="14" class="me-2">
                <use xlink:href="#Heart_Black"></use>
            </svg>
            <span class="me-4">@livewire('recipe.like-count', ['recipe' => $recipe])</span>
            <svg width="14" height="14" class="me-2">
                <use xlink:href="#Comment_Black"></use>
            </svg>
            <span>{{ $recipe->comments_count }}</span>
        </div>
        <div class="d-none d-md-flex w-2/5 ps-3 justify-content-end align-items-center">
            <span class="me-2 text-end">{{ $author['name'] }}</span>
            <img src="/storage/{{ $author->profile_photo_path }}" width="42px" height="42px" class="--radius_100">
        </div>
    </div>

    <div class="container mb-5 p-0 --mw-1000">
        <div class="--bg_white --shadow --radius --no_wrap">
            <div class="row m-0 p-3 position-relative">
                <div class="col-12 col-md-5 mb-2 mb-md-0 ps-0 pe-0 pe-md-3">
                    <img src="/storage/{{ $recipe->image }}" class="w-full --radius">
                </div>
                <div class="col-12 col-md-7 pe-0 d-flex flex-column justify-content-between">
                    <div>
                        <div class="mb-3 fs-18 --f_bold --no_wrap_normal">{{ $recipe->title }}</div>
                        <div class="d-flex align-items-center fs-6 --f_bolder">
                            <svg width="22" height="22" class="me-2">
                                <use xlink:href="#TimeBlack"></use>
                            </svg><span class="me-4">{{ __('recipe.t' . $recipe->cooking_time . "m") }}</span>
                            <svg width="22" height="26" class="me-2">
                                <use xlink:href="#Footprints"></use>
                            </svg><span>{{ $recipe->steps->count() }} этапов</span>
                        </div>

                        <div class="mt-3 lh-sm --no_wrap_normal">
                            <small>
                                {!! $recipe->description !!}
                            </small>
                        </div>
                    </div>
                    <div class="mt-3 fs-14 --f_bolder">
                        @if (strlen(trim($recipe->video_url)) > 4)
                        <a href="{{ $recipe->video_url }}" class="d-inline-flex align-items-center" target="_blank">
                            <span class="--f_main">Посмотреть рецепт на YouTube</span>
                            <svg width="18" height="14" class="ms-2">
                                <use xlink:href="#YouTubeIcon"></use>
                            </svg>
                        </a>
                        @endif
                    </div>
                </div>
                <ul class="navbar-nav --abs --dotted --r w-auto mt-2 me-2 mt-md-3 me-md-3 p-0" style="--bs-scroll-height:100px;">
                    <li class="nav-item dropdown">
                        <a id="dLabel" class="nav-link py-0 dropdown-toggle-js" href="#" data-bs-toggle="dropdown" aria-expanded="false" role="button">
                            <svg width="18" height="4">
                                <use xlink:href="#Dots"></use>
                            </svg>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                            <li><a class="dropdown-item" href="{{ route('recipe.edit', $recipe->id) }}">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Другое действие</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">Что-то еще</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

            <div class="row m-0 mt-2 p-3 bg_lightest_blue-v2">
                <div class="col-12 col-md-5 fs-14">
                    <div class="h6 mb-2 mb-md-3 --f_bold --f_grey text-uppercase">продукты:</div>
                    <ul class="m-0 ps-4 list-disc">
                        @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="col-12 col-md-3 mt-3 mt-md-0 fs-14">
                    <div class="h6 mb-2 mb-md-3 --f_bold --f_grey text-uppercase">Теги:</div>
                    <div class="fs-6 --tags --m_large --no_wrap_normal">
                        @foreach($recipe->tags->unique() as $curTag)
                        <a href="{{ $curTag->recipe_index_url }}" class="btn badge --radius --bg-blue --f_bold --f_main">{{ $curTag->name }}</a>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="d-flex p-4 align-items-center justify-content-between justify-content-sm-center --f_bold">
                <a href="#commentsList" class="d-flex align-items-center me-4 me-sm-5 --f_main">
                    <small>
                        <svg width="21" height="20" class="me-1">
                            <use xlink:href="#ActionComment"></use>
                        </svg>
                        Комментировать
                    </small>
                </a>
                @livewire('recipe.like', ['recipe' => $recipe])
                <a href="#" class="d-flex align-items-center --f_main">
                    <small>
                        <svg width="21" height="22" class="me-1">
                            <use xlink:href="#Share"></use>
                        </svg>
                        <span class="d-none d-sm-inline">Поделится</span>
                    </small>
                </a>
            </div>
        </div>
    </div>

    <div class="container px-0 mb-5 --mw-1000">
        <div class="h4 --f_grey text-uppercase">Пошаговый фото рецепт - {{ $recipe->title }}</div>
        <div class="--step_boxes">
            @foreach($recipe->steps as $step)
            <div class="row align-items-center m-0 my-3 p-3 --bg_white --shadow --radius --step_box">
                <div class="col-12 col-md-5 mb-2 mb-md-0 ps-0 pe-0 pe-md-3">
                    @if(isset($step['image']) && is_string($step['image']) && strlen($step["image"]) > 4)
                    <img src="/storage/{{ $step['image'] }}" class="w-100 --radius">
                    @endif
                </div>
                <div class="col-12 col-md-7 ps-0 ps-md-3 pe-0 d-flex flex-column justify-content-between">
                    <small>
                        {!! $step['description'] !!}
                    </small>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <div id="commentsList" class="container p-0 --mw-1000">
        @livewire('recipe.comment.show', ['recipe' => $recipe])
    </div>
    <div class="container px-0 mb-4 --mw-1000 --bg_white --radius fs-4_5">
        @livewire('recipe.comment.create', ['recipe' => $recipe, 'user' => Auth::user()])
    </div>
</section>
@endsection
@push('jq_scripts')
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
@endpush