@extends('layouts/eatvio')
@php
    $typeToSvgId = ['slim' => '#SlimBig', 'fit' => '#FitBig', 'wellness' => '#WellnessBig', 'behavior' => '#BehaviorBig'];
@endphp
@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="">
			<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="search" type="search" placeholder="Поиск плана">
				</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($plans as $plan)
                            <div class="col-md-6 mb-3">
                                <div class="h-100 --bg_white --shadow --radius --no_wrap overflow-hidden">
                                    <a href="{{ route("plan.show", $plan) }}">
                                        <div class="post_img position-relative plan-card-img">
                                            <img src="/storage/{{ $plan->image }}" class="w-100">
                                            <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">{{ views($plan)->unique()->count() }}</span>
                                                <svg width="16" height="14" class="me-2"><use xlink:href="#Heart_White"></use></svg>
                                                <span class="me-3">{{ $plan->likes_count }}</span>
                                                <svg width="16" height="14" class="me-2"><use xlink:href="#Comments_White"></use></svg>
                                                <span>{{ $plan->comments_count }}</span>
                                            </div>
                                        </div>
                                    </a>
                                <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">{{ $plan->duration }} дней</span>

                                            <svg width="24" height="20"><use xlink:href="#UsersBlack"></use></svg>
                                            <span class="mx-2 --f_bold">132</span>
                                        </div>
                                        <a href="#"><svg width="24" height="21"><use xlink:href="#HeartPath"></use></svg></a>
                                    </div>
                                    @php
                                        $author = $plan->author()->first();
                                    @endphp

                                    <a href="{{ route('profile.show', $author) }}" style="color:var(--main_fcolor)">
                                        <div class="d-flex my-3 align-items-center justify-content-between">
                                            <div class="d-flex align-items-center">
                                                <img src="{{ $author->profile_photo_url }}" width="42px" height="42px" class="me-2 --radius_100 w-100 plan-author">
                                                <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>
                                            </div>
                                            <div class="d-flex align-items-center">
                                                <a href="{{ route('profile.show', $author) }}" class="btn btn-lg btn-primary btn-block px-4">
                                                    <svg width="20" height="20">
                                                        <use xlink:href="#WhiteChat"></use>
                                                    </svg>
                                                </a>
                                            </div>
                                        </div>
                                    </a>
                                    <a href="{{ route('plan.show', $plan) }}" style="color:var(--main_fcolor)">
                                        <div class="h6 --f_bold --no_wrap_normal">План “{{ $plan->name }}”</div>
                                        <small class="d-block --no_wrap_normal">{!! $plan->details !!}</small>

                                        @if(count($plan->allItems()) > 0)
                                            <small>
                                                <ul class="my-3 checks --f_bold">
                                                    @foreach($plan->allItems() as $item)
                                                        <li> {{ $item }} </li>
                                                    @endforeach
                                                </ul>
                                            </small>
                                        @endif

                                        <div class="d-flex align-items-center justify-content-between">
                                            @if(count($plan->types) > 0)
                                            <div class="d-flex align-items-center">
                                                @foreach($plan->types as $planType)
                                                    <svg width="36" height="36" class="me-2"><use xlink:href="{{ $typeToSvgId[$planType] }}"></use></svg>
                                                @endforeach
                                            </div>
                                            @endif
                                            <span class="px-4 py-2 badge rounded-pill bg-success --f_bold">от {{ $plan->minPrice }}₽</span>
                                        </div>
                                    </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>
						<div class="col pe-0">
							<input type="text" class="form-control fs-4_5 py-3 w-100 text-center" placeholder="от">
						</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" placeholder="до">
						</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" placeholder="от">
						</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" placeholder="до">
						</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" placeholder="от">
						</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" placeholder="до">
						</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="dates" id="dates2" autocomplete="off">
								<label class="btn --f_bold w-50" for="dates2">
                                    <svg width="40" height="40" class="me-1">
                                        <use xlink:href="#SlimBig"></use>
                                    </svg>
                                    <small class="lh-1">Похудения</small>
                                </label>
								<input type="checkbox" class="btn-check" name="dates" id="dates1" autocomplete="off">
								<label class="btn --f_bold w-50" for="dates1">
                                    <svg width="40" height="40" class="me-1">
                                        <use xlink:href="#FitBig"></use>
                                    </svg>
                                    <small class="lh-1">Спортивное питание</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="status" id="status1" autocomplete="off">
								<label class="btn --f_bold w-50" for="status1">
                                    <svg width="40" height="40" class="me-1">
                                        <use xlink:href="#WellnessBig"></use>
                                    </svg>
                                    <small class="lh-1">Улучшения состояния</small>
                                </label>
								<input type="checkbox" class="btn-check" name="status" id="status2" autocomplete="off">
								<label class="btn --f_bold w-50" for="status2">
                                    <svg width="40" height="40" class="me-1">
                                        <use xlink:href="#BehaviorBig"></use>
                                    </svg>
                                    <small class="lh-1">Корректировка пищевого поведения</small>
                                </label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
@endsection