@extends('layouts/eatvio')
@php
    $author = $diet->author()->first();
    $authorPhoto = Storage::url($author->profile_photo_path);
    $image = Storage::url($diet->image);

    $typeToSvgId = [
        'meat' => '#MeatBig',
        'veg' => '#BroccoliBig',
        'corb' => '#BreadBig',
        'alko' => '#WineBig'
    ];

    $dietDuration = $diet->duration;
    $mealNames = ['breakfast', 'dinner', 'supper', 'lunch', 'snacks'];
    $dietViewsCount = views($diet)->unique()->count();
@endphp
@section('main_section')
    <section class="py-5" id="main">
		<div class="container d-flex justify-content-between align-items-center mb-4 ps-4 pe-3 py-3 --bg_white --shadow --radius --mw-1000">
            <a href="{{ route('diet.index', ['author' => $author->id]) }}" class="d-flex align-items-center --f_bold --f_main">
                <svg width="17" height="16" class="me-2">
                    <use xlink:href="#GoBack"></use>
                </svg>
                <span class="d-none d-md-inline">{{ __('diet.consultant_diets') }}</span>
            </a>
			<div class="d-flex align-items-center">
				<div class="d-none d-md-flex me-3 align-items-center">
                    <a href={{ route("profile.show", ['user' => $author]) }} class="me-2 text-nowrap --f_bold --f_main">
                        <span class="me-2 text-nowrap --f_bold">{{ $author->name }}</span>
                        <img src="{{ $authorPhoto }}" width="42px" height="42px" class="--radius_100" style="height: 42px;">
                    </a>
				</div>

				<div class="d-none d-md-flex me-3 align-items-center">
                    <a href="#" class="btn btn-lg btn-primary btn-block w-100 ps-4 pe-sm-4 --f_bold" target="_blank" style="max-width: 180px;">
                        <svg width="20" height="20" class="me-3"><use xlink:href="#WhiteChat"></use></svg>
                        {{ __('profile.start_chat_with') }}
                    </a>
                </div>
			</div>
		</div>

		<div class="container mb-5 --mw-1000">
			<div class="row justify-content-between flex-lg-nowrap">
				<div class="col-lg-12 me-lg-4 mb-4 mb-lg-0 px-3 pt-3 pb-4 --bg_white --shadow --radius">
					<div class="d-flex justify-content-between align-items-center mb-2 --f_bold">
                        <div class="h5 mb-0 --f_bold">{{ $diet->name }}</div>
						<div class="d-flex align-items-center">
							<svg width="20" height="14" class="me-2"><use xlink:href="#Eye_Black"></use></svg><span class="me-3 fs-5">{{ $dietViewsCount }}</span>
                            <svg width="16" height="14" class="me-2"><use xlink:href="#Heart_Black"></use></svg>@livewire('diet.like-count', ['diet' => $diet])
                            <svg width="14" height="14" class="me-2"><use xlink:href="#CommentIcon"></use></svg><span class="me-3 fs-5">{{ $diet->comments_count }}</span>
                            <a class="btn" href="{{ route('diet.edit', $diet) }}" type="button"><span class="me-3 fs-5">Edit</span></a>
						</div>
					</div>

					<img src="{{ $image }}" class="w-100">

                    <div class="d-flex justify-content-between align-items-center my-2 p-2 bg_lightest_blue --radius">
						<div class="d-flex align-items-center fs-6">
							<svg width="22" height="22"><use xlink:href="#TimeBlack"></use></svg>
                            <span class="mx-2 me-4 --f_bold">{{ $diet->duration }} {{ __('diet.days') }}</span>

							<svg width="24" height="20"><use xlink:href="#UsersBlack"></use></svg>
							<span class="mx-2 --f_bold">132</span>
						</div>
                        @livewire('diet.like', ['diet' => $diet])
					</div>

                    <div class="fs-4_5 p-2">{!! $diet->details !!}</div>
                    <hr />

                    <div class="d-flex align-items-center justify-content-between">
                        @if(count($diet->types) > 0)
                            <div class="d-flex align-items-center">
                                @foreach($diet->types as $dietType)
                                    <small>
                                        <svg width="36" height="36" class="m-2"><use xlink:href="{{ $typeToSvgId[$dietType] }}"></use></svg>
                                        {{ __('diet.' . $dietType) }}
                                    </small>
                                @endforeach
                            </div>
                        @endif
                        @livewire('diet.start-button', ['diet' => $diet, 'user' => Auth::user()])
                    </div>
                    <hr />

                    <div class="h6 mt-4 mb-3 --f_bold --no_wrap_normal">{{ __('diet.schedule_by_day') }}</div>

                    <ul class="nav nav-pills flex-nowrap --bordered --radius --tabs_blue overflow-x-scroll" id="pills-tab" role="tablist">
                        @for($curDay = 1; $curDay <= $dietDuration; $curDay++)
							<li class="nav-item">
								<button class="btn-lg px-md-4 {{ $curDay == 1 ? "active" : "" }} nav-link" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-{{ $curDay }}" type="button" role="tab" aria-controls="pills-{{ $curDay }}" aria-selected="true">
                                    <small>{{ $curDay }}</small>
                                </button>
							</li>
                        @endfor
                    </ul>
                    <div class="mt-3">
                        <div class="tab-content" id="pills-tabContent">
                            @foreach($diet->schedules as $day => $schedule)
                                <div class="tab-pane fade {{ $day == 1 ? "active" : "" }} show" id="pills-{{ $day }}" role="tabpanel" aria-labelledby="pills-{{ $day }}-tab">
                                    @foreach($mealNames as $mealName)
                                        @isset($schedule[$mealName])
                                        <div class="h4">{{ __('diary.' . $mealName) }}</div>
                                        <table class="table --table_blue mb-0 fs-4_5 --f_bold">
                                            <tbody>
                                                @foreach($schedule[$mealName] as $food)
                                                <tr>
                                                    <td class="ps-md-3 w-50">{{ $food['name'] }}</td>
                                                    <td class="pe-md-3 w-50 text-end">{{ $food['quantity'] }} {{ __('diet.' . $food['portion']) }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        @endisset
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                    </div>

					<div class="d-flex mt-4 align-items-center justify-content-between --f_bold">
						<a href="#plan-comment-textarea" class="d-flex align-items-center --f_main">
                            <small>
                                <svg width="21" height="20" class="me-1"><use xlink:href="#ActionComment"></use></svg>
                                {{ __('diet.add_comment') }}
                            </small>
                        </a>

                        @livewire('diet.like', ['diet' => $diet, 'isIconOnly' => true])

						<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">{{ __('diet.share') }}</span>
                            </small>
                        </a>
					</div>
				</div>
			</div>
		</div>

		<div class="container px-0 mb-4 --mw-1000">
			<div class="h4 mb-4 --f_grey">{{ __('diet.reviews') }}</div>
		</div>

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

@push('jq_scripts')
  	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/bootstrap.bundle.min.js"></script>
@endpush