@extends('web.layouts.app')
@section($title, $subtitle)
@section('content')

<main>
	<div class="hero_single inner_pages background-image" data-background="url({{asset('images/sliders/mario.jpg')}})">
		<div class="opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.6)">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-xl-9 col-lg-10 col-md-8">
						<h1>New food Menu every friday</h1>
						<p>Cooking delicious and tasty food since 2018</p>
					</div>
				</div>
				<!-- /row -->
			</div>
		</div>
		<div class="frame white"></div>
	</div>

	<div class="pattern_2">

		<div class="container margin_60_40" data-cue="slideInUp">
			<div class="tabs_menu add_bottom_25">
				<ul class="nav nav-tabs" role="tablist">
					<li class="nav-item">
						<a id="tab-A" href="menu-3.html#pane-A" class="nav-link active" data-bs-toggle="tab" role="tab">BREAKFAST</a>
					</li>
					<li class="nav-item">
						<a id="tab-B" href="menu-3.html#pane-B" class="nav-link" data-bs-toggle="tab" role="tab">LUNCH</a>
					</li>
					<li class="nav-item">
						<a id="tab-C" href="menu-3.html#pane-C" class="nav-link" data-bs-toggle="tab" role="tab">DINNER</a>
					</li>
				</ul>
				<div class="tab-content add_bottom_25" role="tablist">
					<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
						<div class="card-header" role="tab" id="heading-A">
							<h5>
								<a class="collapsed" data-bs-toggle="collapse" href="menu-3.html#collapse-A" aria-expanded="true" aria-controls="collapse-A">
									BREAKFAST
								</a>
							</h5>
						</div>
						<div id="collapse-A" class="collapse" role="tabpanel" aria-labelledby="heading-A">
							<div class="card-body">
								<div class="row magnific-gallery add_top_30">
									@foreach ($menus as $menu)
									@if ($menu->category_id == 1)
									<div class="col-lg-6">
										<div class="menu_item order">
											<figure>
												<a href="url({{asset("images/menus_dias/dash/".$menu->image)}})" title="Soft shell crab" data-effect="mfp-zoom-in">
													<img src="{{asset("images/menus_dias/dash/".$menu->image)}}" data-src="{{asset("images/menus_dias/dash/".$menu->image)}}" class="lazy" alt="">
												</a>
											</figure>

											<div class="menu_title">
												<h3>{{$menu->name}}</h3><em>${{$menu->price}}</em>
											</div>
											<p>Prot: {{$menu->proteins}}, Carbs:{{$menu->carbohydrate}},Fat:{{$menu->fat}} Total:{{$menu->calories}}</p>
											<!-- <a href="" class="add_to_cart">Add To Cart</a> -->
										</div>
									</div>
									@endif
									@endforeach
								</div>
								<!-- /row -->
							</div>
							<!-- /card-body -->
						</div>
					</div>
					<!-- /tab -->
				</div>
				<div class="tab-content add_bottom_25" role="tablist">
					<div id="pane-B" class="card tab-pane fade show " role="tabpanel" aria-labelledby="tab-B">
						<div class="card-header" role="tab" id="heading-B">
							<h5>
								<a class="collapsed" data-bs-toggle="collapse" href="menu-3.html#collapse-B" aria-expanded="true" aria-controls="collapse-B">
									LUNCH
								</a>
							</h5>
						</div>
						<div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
							<div class="card-body">
								<div class="row magnific-gallery add_top_30">
									<div class="row magnific-gallery add_top_30">
										@foreach ($menus as $menu)
										@if ($menu->category_id == 2)
										<div class="col-lg-6">
											<div class="menu_item order">
												<figure>
													<a href="url({{asset("images/menus_dias/dash/".$menu->image)}})" title="Soft shell crab" data-effect="mfp-zoom-in">
														<img src="{{asset("images/menus_dias/dash/".$menu->image)}}" data-src="{{asset("images/menus_dias/dash/".$menu->image)}}" class="lazy" alt="">
													</a>
												</figure>

												<div class="menu_title">
													<h3>{{$menu->name}}</h3><em>${{$menu->price}}</em>
												</div>
												<p>Prot: {{$menu->proteins}}, Carbs:{{$menu->carbohydrate}},Fat:{{$menu->fat}} Total:{{$menu->calories}}</p>
												<!-- <a href="" class="add_to_cart">Add To Cart</a> -->
											</div>
										</div>
										@endif
										@endforeach
									</div>
								</div>
								<!-- /row -->
							</div>
							<!-- /card-body -->
						</div>
					</div>
					<!-- /tab -->
				</div>
				<div class="tab-content add_bottom_25" role="tablist">
					<div id="pane-C" class="card tab-pane fade show " role="tabpanel" aria-labelledby="tab-C">
						<div class="card-header" role="tab" id="heading-C">
							<h5>
								<a class="collapsed" data-bs-toggle="collapse" href="menu-3.html#collapse-C" aria-expanded="true" aria-controls="collapse-C">
									DINNER
								</a>
							</h5>
						</div>
						<div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
							<div class="card-body">
								<div class="row magnific-gallery add_top_30">
									<div class="row magnific-gallery add_top_30">
										@foreach ($menus as $menu)
										@if ($menu->category_id == 3)
										<div class="col-lg-6">
											<div class="menu_item order">
												<figure>
													<a href="url({{asset("images/menus_dias/dash/".$menu->image)}})" title="Soft shell crab" data-effect="mfp-zoom-in">
														<img src="{{asset("images/menus_dias/dash/".$menu->image)}}" data-src="{{asset("images/menus_dias/dash/".$menu->image)}}" class="lazy" alt="">
													</a>
												</figure>

												<div class="menu_title">
													<h3>{{$menu->name}}</h3><em>${{$menu->price}}</em>
												</div>
												<p>Prot: {{$menu->proteins}}, Carbs:{{$menu->carbohydrate}},Fat:{{$menu->fat}} Total:{{$menu->calories}}</p>
												<!-- <a href="" class="add_to_cart">Add To Cart</a> -->
											</div>
										</div>
										@endif
										@endforeach
									</div>
								</div>
								<!-- /row -->
							</div>
							<!-- /card-body -->
						</div>
					</div>
					<!-- /tab -->
				</div>
				<!-- /tab-content -->
			</div>
			<!-- /tabs_menu-->
		</div>
		<!-- /container -->
	</div>
	<!-- /pattern -->

</main>
<!-- /main -->

<div id="toTop"></div><!-- Back to top button -->
<script src="{{asset("assets/js/common_scripts.min.js")}}"></script>
<script src="{{asset("assets/js/common_func.js")}}"></script>
<script src="{{asset("assets/phpmailer/validate.js")}}"></script>
@endsection