@extends('layouts/eatvio')

@section('main_section')
@php
    $curDiary = $diary;
    $curMeals = $curDiary->meals()->orderBy('type')->get();
    $typeNames = ['Завтрaк', 'Обед', 'Ужин', 'Ланч', 'Перекусы'];
@endphp

<section class="py-5" id="main">
<div class="container d-flex justify-content-between align-items-center mb-4 px-4 py-2 --bg_white --shadow --radius --mw-1000">
			<a href="{{ route('calendar.index') }}" 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">Календарь</span></a>
			<div class="fs-5_5 text-center">
                <div class="--f_bolder"><a class="link-dark" href="{{ route('calendar.index') }}">{{ $daysCount }} День</a></div>
                <div class="--f_blue">{{ $curDiary->date }}</div>
			</div>
		</div>

		<div class="container d-flex justify-content-between align-items-center mb-4 px-0 py-2 --mw-1000 flex-wrap flex-md-nowrap">
			<div class="w-45 me-3 py-3 px-4 --bg_white --shadow --radius text-center --f_bold --no_wrap">
				<p>Проснулись</p>
				<div class="d-flex align-items-center justify-content-center">
					<svg width="24" height="24" class="me-2"><use xlink:href="#Clock"></use></svg>
                    <span class="--f_blue">{{ $curDiary->wakeup }}</span>
				</div>
			</div>
			<div class="w-45 py-3 px-4 --bg_white --shadow --radius text-center --f_bold --no_wrap">
				<p>Легли спать</p>
				<div class="d-flex align-items-center justify-content-center">
					<svg width="26" height="24" class="me-2"><use xlink:href="#Sleep"></use></svg>
                    <span class="--f_blue">{{ $curDiary->retire }}</span>
				</div>
			</div>
		</div>
        @foreach($curMeals as $key => $meal)
		<div class="container mb-4 pt-3 pb-2 overflow-hidden --bg_white --shadow --radius --mw-1000">
			<div class="d-flex px-md-5 justify-content-between align-items-center flex-wrap flex-lg-nowrap flex-column-reverse flex-lg-row overflow-x-xs-scroll">
				<h3>{{ $typeNames[$meal->type] }}</h3>
				<div class="d-flex mb-3 mb-lg-0 align-items-center">
					<div class="d-flex align-items-center">
                        <small>Сытность:</small><span class="ms-2 fs-5 --f_bold --f_blue">{{ $meal->satiety }}</span>
					</div>
					<div class="d-flex mx-3 align-items-center">
						<small>Настроение:</small><span class="ms-2 fs-5 --f_bold --f_blue">{{ $meal->mood }}</span>
					</div>
					<div class="d-flex align-items-center">
						<svg width="23" height="22"><use xlink:href="#Time"></use></svg>
                        <span class="ms-2 fs-5 --f_bold --f_blue">{{ $meal->time }}</span>
					</div>
				</div>
			</div>
            @if(count($meal->portions))
			<div class="mt-3">
				<div class="" id="pills-tabContent">
					<div class="tab-pane fade show active" id="pills-0" role="tabpanel" aria-labelledby="pills-0-tab">
						<table class="table --table_blue mb-0 fs-4_5 --f_bold">
                            @foreach($meal->portions as $portion)
                                <tr>
                                    <td class="ps-md-5 w-50">{{ $portion->product_name }}</td>
                                    <td class="pe-md-5 w-50 text-end">{{ $portion->quantity }} {{ $portion->portion }}</td>
                                </tr>
                            @endforeach
                        </table>
					</div>
				</div>
			</div>
            @endif
		</div>
        @endforeach

		<div class="container p-0 --mw-1000">
            <a href="{{ route('diary.edit', ['diary' => $curDiary]) }}" class="btn btn-lg btn-secondary btn-block w-100 --f_bolder" type="submit">РЕДАКТИРОВАТЬ ДЕНЬ</a>
		</div>


</section>
@endsection