@extends('web.layouts.app')
@section($title, $subtitle)
@section('content')
<main>
	<div id="carousel-home">
		<div class="owl-carousel owl-theme">
			<div class="owl-slide cover lazy" data-bg="url({{asset('images/sliders/mario.jpg')}})">
				<div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(0, 0, 0, 0.5)">
					<div class="container">
						<div class="row justify-content-center justify-content-md-end">
							<div class="col-lg-6 static">
								<div class="slide-text text-end white">
									<h2 class="owl-slide-animated owl-slide-title">FOOD ON<br>WHEELS BRO</h2>
									<p class="owl-slide-animated owl-slide-subtitle">
										Cooking delicious food since 2018
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--/owl-slide-->
			<!-- <div class="owl-slide cover lazy" data-bg="url({{asset('assets/img/slides/slide_home_2.jpg')}})">
				<div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(0, 0, 0, 0.5)">
					<div class="container">
						<div class="row justify-content-center justify-content-md-start">
							<div class="col-lg-6 static">
								<div class="slide-text white">
									<h2 class="owl-slide-animated owl-slide-title">Doing what<br>We Love</h2>
									<p class="owl-slide-animated owl-slide-subtitle">
										Cooking delicious food since 2018
									</p>
									<div class="owl-slide-animated owl-slide-cta"><a class="btn_1" href="reservations.html" role="button">Read more</a></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div> -->
			<!--/owl-slide-->
			<!-- <div class="owl-slide cover lazy" data-bg="url({{asset('assets/img/slides/slide_home_3.jpg')}})">
				<div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(0, 0, 0, 0.6)">
					<div class="container">
						<div class="row justify-content-center justify-content-md-start">
							<div class="col-lg-12 static">
								<div class="slide-text text-center white">
									<h2 class="owl-slide-animated owl-slide-title">Behind every great meal<br>is a well-structured prep session</h2>
									<p class="owl-slide-animated owl-slide-subtitle">
										Cooking delicious food since 2018
									</p>
									<div class="owl-slide-animated owl-slide-cta"><a class="btn_1" href="menu-1.html" role="button">Read more</a></div>
								</div>
							</div>
						</div>
					</div>
				</div> 
			</div> -->
		</div>
		<div id="icon_drag_mobile"></div>
	</div>
	<!--/carousel-->

	<ul id="banners_grid" class="clearfix">
		<li>
			<a href="{{route('menuTabs')}}" class="img_container">
				<img src="{{asset('images/sliders/our_menu.jpg')}}" data-src="{{asset('images/sliders/our_menu.jpg')}}" alt="" class="lazy">
				<div class="short_info opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.5)">
					<h3>Our Menu</h3>
					<p>View Our Specialites</p>
				</div>
			</a>
		</li>
		<li>
			<a href="{{route('order')}}" class="img_container">
				<img src="{{asset('images/sliders/delivery.png')}}" data-src="{{asset('images/sliders/delivery.png')}}" alt="" class="lazy">
				<div class="short_info opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.5)">
					<h3>Delivery</h3>
					<p>Home delivery or take away food</p>
				</div>
			</a>
		</li>
		<li>
			<a href="{{route('gallery.index')}}" class="img_container">
				<img src="{{asset('images/sliders/cocina.jpg')}}" data-src="{{asset('images/sliders/cocina.jpg')}}" alt="" class="lazy">
				<div class="short_info opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.5)">
					<h3>Inside Food on wheels</h3>
					<p>View the Gallery</p>
				</div>
			</a>
		</li>
	</ul>
	<!--/banners_grid -->

	<div class="pattern_2">
		<div class="container margin_120_100 home_intro">
			<div class="row justify-content-center d-flex align-items-center">
				<div class="col-lg-5 text-lg-center d-none d-lg-block" data-cue="slideInUp">
					<figure class="image-container">
						<img src="{{asset('assets/img/home_1_placeholder.png')}}" data-src="{{asset('assets/img/home_1.jpg')}}" width="354" height="440" alt="" class="img-fluid lazy">
						<a href="https://www.instagram.com/reel/C6cckSGrDE0/" target="_blank">
							<i class="fs1"></i>
						</a>
					</figure>
				</div>
				<div class="col-lg-5 pt-lg-4" data-cue="slideInUp" data-delay="500">
					<div class="main_title">
						<span><em></em></span>
						<h2>Some words about us</h2>
					</div>
					<p>Hey family, a heartfelt thank you for supporting our Meal Prep journey here at Food on Wheels Bro. Your support fuels our passion to make your life convenient. To each of you, a plateful of gratitude! 🙏🏻 stay tuned for new exciting things coming soon!</p>
					<p>- Chef Jorge, Chef Leidy & Chef Ivan 👨🏻‍🍳👩🏻‍🍳</p>
					<p><img src="{{asset('assets/img/signature.png')}}" width="140" height="50" alt="" class="mt-3"></p>|
				</div>
			</div>
			<!--/row -->
		</div>
		<!--/container -->
	</div>
	<!--/pattern_2 -->

	<div class="bg_gray">
		<div class="container margin_120_100" data-cue="slideInUp">
			<div class="main_title center mb-5">
				<span><em></em></span>
				<h2>Our Daily Menu</h2>
			</div>
			<!-- /main_title -->
			<div class="banner lazy" data-bg="url({{asset('assets/img/menuhome.jpg')}})">
				<div class="wrapper d-flex align-items-center justify-content-between opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.5)">
					<div>
						<small>Remember</small>
						<h3>We receive orders from Thursday to Saturday until 8 p.m.</h3>
						<p>Behind every great meal<br>is a well-structured prep session</p>
						<a href="{{route('order')}}" class="btn_1">Place an orden</a>
					</div>
				</div>
				<!-- /wrapper -->
			</div>
			<!-- /banner AQUI VA EL FOR-->
			<div class="row magnific-gallery homepage add_bottom_25">

				@foreach ($menus as $menu) 
				<div class="col-lg-6" data-cue="slideInUp">
					<div class="menu_item">
						<figure>
							<a  title="Summer Berry" 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->category_name}}</h3><br>
							<h3>{{$menu->name}}</h3><em>${{$menu->price}}</em>
						</div>
						<p>Total Calories: {{$menu->calories}}</p>
					</div>
				</div> 
				@endforeach

			</div>
		</div>
		<!-- /container -->
	</div>
	<hr>
	<div style="max-width: 600px; margin: 0 auto; padding: 20px;">
		<h5>Leave a comment</h5>
		<form action="{{ route('admin.testimony.store') }}" method="POST">
			@csrf
			<div class="row">
				<div class="col-md-12 col-sm-6">
					<div class="form-group">
						<input type="text" name="name" id="name2" class="form-control" placeholder="Name">
					</div>
				</div>
			</div>
			<div class="form-group">
				<textarea class="form-control" name="comentario" id="comments2" style="height: 200px;" placeholder="Comment"></textarea>
			</div>
			<div class="form-group">
				<button type="submit" id="submit2" class="btn_1 mb-3">Submit</button>
			</div>
		</form>
	</div>

	<hr>
	<!-- /bg_gray -->
	<!-- /pattern_2 -->
</main>
@endsection