@extends('layouts/eatvio')
@php
    $typeToSvgId = [
        'meat' => '#MeatBig',
        'veg' => '#BroccoliBig',
        'corb' => '#BreadBig',
        'alko' => '#WineBig'
    ];

    $mealNames = ['breakfast', 'dinner', 'supper', 'lunch', 'snacks'];
@endphp
@push('css_head')
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
@endpush

@section('main_section')
    <section class="py-5" id="main">
        <form class="container d-block d-sm-flex justify-content-between align-items-end align-items-lg-center mb-4 p-0 --mw-1170" action type id="diet_search">
            <div class="d-block d-lg-flex align-items-center col-12 col-sm-9 me-lg-2 mb-1 mb-sm-0 p-0 pe-sm-2">
                <div class="h4 me-md-3 mb-3 mb-lg-0 --f_grey text-uppercase">Популярные диеты</div>
                <div class="d-flex align-items-center -search flex-grow-1">
					<span class="btn --search_icon">
                        <svg width="20" height="20">
                            <use xlink:href="#SearchIcon"></use>
                        </svg>
                    </span>
					<input class="form-control" name="filter[name]" type="search" placeholder="Поиск диет"  value="{{ $filter['name'] ?? "" }}" />
				</div>
			</div>
			<div class="col-12 col-sm px-0 flex-grow-1">
				<button type="submit" class="btn btn-lg btn-primary btn-block w-100 ps-4 pe-sm-4 --f_bold text-uppercase --no_wrap">Найти диету</button>
			</div>
		</form>

		<div class="container mb-5 --mw-1170">
			<div class="row justify-content-between flex-lg-nowrap flex-column-reverse flex-lg-row">
				<div class="col-lg-9 me-lg-2 mb-4 mb-lg-0 p-0 pe-lg-2">
					<div class="row gx-3">
                        @foreach($diets as $diet)
                            @php
                                $author = $diet->author()->first();
                                // $authorPhoto = Storage::url($author->profile_photo_path);
                                $authorPhoto = $author->profile_photo_url;
                                $image = Storage::url($diet->image);

                                $dietDuration = $diet->duration;
                                $dietViewsCount = views($diet)->unique()->count();
                            @endphp
                            <div class="col-md-6 mb-3"><div class="h-100 --bg_white --shadow --radius --no_wrap overflow-hidden">
                                <div class="post_img position-relative">
                                    <div style="height: 237px; overflow:hidden;">
                                        <img src="{{ $image }}" class="w-100">
                                    </div>
                                    <div class="post_v_l w-100 d-flex justify-content-center align-items-center position-absolute --f_white bgt-03">
                                        <svg width="20" height="14" class="me-2"><use xlink:href="#Eye_White"></use></svg>
                                        <span class="me-3">{{ $dietViewsCount }}</span>
                                        <svg width="16" height="14" class="me-2"><use xlink:href="#Heart_White"></use></svg>
                                        <span class="me-3">@livewire('diet.like-count', ['diet' => $diet])</span>
                                        <svg width="16" height="14" class="me-2"><use xlink:href="#Comments_White"></use></svg>
                                        <span class="me-3">{{ $diet->comments_count }}</span>
                                    </div>
                                </div>

                                <div class="p-3 pt-2">
                                    <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">{{ $diet->choses_count }}</span>
                                        </div>
                                        <a href="#"><svg width="24" height="21"><use xlink:href="#HeartPath"></use></svg></a>
                                    </div>

                                    <div class="d-flex my-3 align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <a href="{{ route('profile.show', $author) }}">
                                                <img src="{{ $authorPhoto }}" width="42px" height="42px" class="me-2 --radius_100" style="height: 42px;">
                                                <small>
                                                    <span class="d-block --f_bold">{{ $author->name }}</span>
                                                    <div class="d-flex align-items-center">
                                                        <svg width="15" height="15" class="me-2"><use xlink:href="#GoldStar"></use></svg>
                                                        <span class="--f_bold --f_light_gold">4.6</span>
                                                        <span class="ms-2">(32)</span>
                                                    </div>
                                                </small>
                                            </a>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="d-flex align-items-center me-3">
                                                {{-- <svg width="20" height="20"><use xlink:href="#Broccoli"></use></svg> --}}
                                                @foreach($diet->types as $dietType)
                                                    <small>
                                                        <svg width="20" height="20" class="m-2"><use xlink:href="{{ $typeToSvgId[$dietType] }}"></use></svg>
                                                        {{-- {{ __('diet.' . $dietType) }} --}}
                                                    </small>
                                                @endforeach
                                            </div>
                                            <a href="#" class="btn btn-lg btn-primary btn-block px-4"><svg width="20" height="20"><use xlink:href="#WhiteChat"></use></svg></a>
                                        </div>
                                    </div>

                                    <div class="h6 --f_bold --no_wrap_normal">{{ $diet->name }}</div>
                                    <small class="d-block --no_wrap_normal">{!! Str::of(strip_tags($diet->details))->words(7, '...') !!}</small>
                                </div>
                                <div class="d-flex align-items-center">
                                    <a href="{{ route("diet.show", $diet) }}" class="btn btn-secondary ms-1 py-1" >Просмотр</a>
                                </div>
                            </div>
                            </div>
                        @endforeach
					</div>
				</div>
				<div class="d-sm-flex justify-content-sm-between flex-wrap d-lg-block col mb-4 px-0 flex-grow-1">

					<div class="row gx-sm-3 gx-lg-0 col-sm-6 col-lg-12 mb-3 align-items-center">
						<label class="mb-1 --f_grey --f_bold">
                            <small>Срок диеты</small>
                        </label>
                        {{-- @php dump($filter) @endphp --}}
						<div class="col pe-0">
							<input type="text" class="form-control fs-4_5 py-3 w-100 text-center" name="filter[duration_min]" placeholder="от" form="diet_search" value="{{ $filter['duration_min'] ?? "" }}"/>
						</div>
						<div class="w-auto px-2 --f_grey">-</div>
						<div class="col ps-0">
							<input type="text" class="form-control fs-4_5 py-3 w-100 text-center" name="filter[duration_max]" placeholder="до" form="diet_search" value="{{ $filter['duration_max'] ?? "" }}" />
						</div>
					</div>

					<div class="row gx-sm-3 gx-lg-0 col-sm-6 col-lg-12 mb-3 align-items-center">
						<label class="mb-1 --f_grey --f_bold"><small>Проходит диету</small></label>
						<div class="col pe-0">
							<input type="text" class="form-control fs-4_5 py-3 w-100 text-center" name="filter[involved_min]" placeholder="от" form="diet_search" value="{{ $filter['involved_min'] ?? "" }}" />
						</div>
						<div class="w-auto px-2 --f_grey">-</div>
						<div class="col ps-0">
							<input type="text" class="form-control fs-4_5 py-3 w-100 text-center" name="filter[involved_max]" placeholder="до" form="diet_search" value="{{ $filter['involved_max'] ?? "" }}" />
						</div>
					</div>

					<div class="w-100"></div>
					<div class="row gx-0 mb-3 w-100">
						<div class="col-12 col-sm-6 col-lg-12 d-flex flex-column pe-sm-3 pe-lg-0">
							<div class="btn-group --radio">
								<input type="checkbox" class="btn-check" name="filter[contains_type][]" value="veg" id="dates2" autocomplete="off" form="diet_search" @checked(in_array('veg', $hasTypes))>
								<label class="btn --f_bold w-50" for="dates2">
                                    <svg width="40" height="40" class="me-1">
                                        <use xlink:href="#BroccoliBig"></use>
                                    </svg>
                                    <small>{{ __('diet.veg') }}</small>
                                </label>

								<input type="checkbox" class="btn-check" name="filter[contains_type][]" value="meat" id="dates1" autocomplete="off" form="diet_search" @checked(in_array('meat', $hasTypes))>
								<label class="btn --f_bold w-50" for="dates1">
                                    <svg width="40" height="40" class="me-1">
                                        <use xlink:href="#MeatBig"></use>
                                    </svg>
                                    <small>{{ __('diet.meat') }}</small>
                                </label>
							</div>
						</div>
						<div class="col-12 col-sm-6 col-lg-12 d-flex flex-column ps-sm-3 ps-lg-0">
							<div class="btn-group --radio">
								<input type="checkbox" class="btn-check" name="filter[contains_type][]" value="corb" id="status1" autocomplete="off" form="diet_search" @checked(in_array('corb', $hasTypes))>
								<label class="btn --f_bold w-50" for="status1">
                                    <svg width="40" height="40" class="me-1">
                                        <use xlink:href="#BreadBig"></use>
                                    </svg>
                                    <small>{{ __('diet.corb') }}</small>
                                </label>
								<input type="checkbox" class="btn-check" name="filter[contains_type][]" value="alko" id="status2" autocomplete="off" form="diet_search" @checked(in_array('alko', $hasTypes))>
								<label class="btn --f_bold w-50" for="status2">
                                    <svg width="40" height="40" class="me-1">
                                        <use xlink:href="#WineBig"></use>
                                    </svg>
                                    <small>{{ __('diet.alko') }}</small>
                                </label>
							</div>
						</div>
					</div>
					<div class="w-100"></div>
					<div class="--tags mt-4">
						<div class="mb-1 --f_grey --f_bold">
                            <small>Теги</small>
                        </div>
                        <a href="{{ route('diet.index', ['filter' => ['duration_min'  => 0, 'duration_max' => 7]]) }}" class="btn btn-primary btn-sm">Быстрая</a>
                        <a href="{{ route('diet.index', ['filter' => ['contains_type' => ['alko']]]) }}" class="btn btn-primary btn-sm">Легкая</a>
                        <a href="{{ route('diet.index', ['filter' => ['contains_type' => ['meat']]]) }}" class="btn btn-primary btn-sm">С мясом</a>
                        <a href="{{ route('diet.index', ['filter' => ['contains_type' => ['alko']]]) }}" class="btn btn-primary btn-sm">Алкоголь</a>
                        <a href="{{ route('diet.index', ['filter' => ['contains_type' => ['veg']]]) }}" class="btn btn-primary btn-sm">Овощная</a>
                        <a href="{{ route('diet.index', ['filter' => ['contains_type' => ['veg']]]) }}" class="btn btn-primary btn-sm">Веганская</a>
					</div>
				</div>
			</div>
		</div>
    </section>
@endsection