@extends('master')
@section('title')
Inicio
@stop


@section('custom_js_files')
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
@stop

@section('content')
<div class="container">
	<div class="shops">
		<h2 class="title"><i class="bi bi-shop"></i> Nuestros restaurantes</h2>
		<div class="row">
			@foreach($shops as $key => $shop)
			<div class="col-12 col-md-4 mtop16" data-hs="ease-in-out fade up blur zoom-in" style="--hs-rotate: -5deg; --hs-delay: {{ $key*150  }}ms">
				<a href="{{ url('/s/'.$shop->slug) }}" class="shop shadow">
					<div class="featured">
						<img src="{{ config('cms.cdn') }}/platform/shop/{{ $shop->id }}/{{ $shop->featured_file_path }}/{{ $shop->featured_file_name }}" class="img_featured">
						<div class="float_circle_icon">
							<img src="{{ config('cms.cdn') }}/platform/shop/{{ $shop->id }}/{{ $shop->icon_file_path }}/{{ $shop->icon_file_name }}" class="shadow">
						</div>
					</div>
					<div class="meta">
						<div class="name">
							{{ $shop->name }}
						</div>
						<div class="desc">
							{!! $shop->desc !!}
						</div>
						<div class="open">
							<i class="bi bi-clock"></i>  @if($shop->sales_status == "1" && time_if(kvfj($shop->settings, 'hour_open'), kvfj($shop->settings, 'hour_close'))) Abierto @else Cerrado @endif ahora | <i class="fas fa-motorcycle"></i> Delivery desde {{ number(getMinDeliveryPrice($shop->delivery_price)) }}
						</div>
					</div>
					
				</a>
			</div>
			@endforeach
		</div>
	</div>
</div>

<section>
	<div class="delivery_number">
		<div class="front">
			<a href="tel:+50422836676"><img src="{{ url('/static/images/img_01.png') }}"></a>
		</div>
		<div class="bg">
			<img src="{{ url('/static/images/img_02.png') }}">
		</div>
		<div class="clouds">
			<img src="{{ url('/static/images/clouds.png') }}">
		</div>
		
	</div>
</section>

<div class="yellow_section yellow_section_events">
	<div class="container" style="z-index: 99; position: relative;">
		<h2 class="title"><i class="bi bi-calendar-heart"></i> Próximos eventos.</h2>

		<div class="shops shops_responsive">
			<div class="row">
				@foreach($events as $key => $event)
				<div class="col-md-3 col-6" data-hs="fade up blur zoom-in" style="--hs-rotate: -5deg; --hs-delay: {{ $key*150  }}ms">
					<a href="#" class="shop shadow event_modal mtop16" @if($event->video) data-type="video" data-source="{{ getFileUrl($event->video) }}" data-poster="{{ getFileUrl($event->image) }}" @else data-type="image" data-source="{{ getFileUrl($event->image) }}" @endif id="event_{{ $event->id }}">
						<div class="featured">
							<img src="{{ getFileUrl($event->image) }}" class="img_featured">
						</div>
						<div class="meta">
							<div class="name">
								{{ $event->name }}
							</div>
							<div class="open">
								<i class="bi bi-calendar-week"></i> {!! $event->date !!} {!! $event->hour !!} | <i class="bi bi-shop"></i> {!! $event->getShop->name !!}
							</div>
						</div>
					</a>
				</div>
				@endforeach
			</div>
		</div>
	</div>
	@include('components.waves')
</div>
<!--
<div class="are_you_ready">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="content">
					<h2>¿Estas listo para disfrutar tu día #comoenlaplaya?</h2>
					<a href="tel:+50422836676">¡Llamar Ahora!</a>
				</div>
			</div>
		</div>
	</div>
</div>




<div class="section_our_app" style="background: url('{{ url('/static/images/sea_blue.jpg') }}') no-repeat center center; ">
	<div id="particles-js"></div>
	<div class="container">
		<div class="row">
			<div class="col-md-3 col-12">
				<img src="{{ url('/static/images/phone_app.png') }}" class="img-fluid animation_top">
			</div>
			<div class="col-md-9 col-12 d-flex align-items-center">
				<div class="inside">
				<h2 class="title">Descarga nuestra APP EL MORITO</h2>
				<p>Mantente como en la playa directamente en la palma de tu mano con nuestra app, ordena a domicilio, consulta nuestros eventos y mucho más, disponible para Android e iPhone.</p>
				<div class="app_links">
					<a href="{{ url('#') }}" class="scale_to_1"><img src="{{ url('/static/images/google_play.png') }}" alt="El Morito en Google Play"></a>
					<a href="{{ url('#') }}" class="scale_to_1"><img src="{{ url('/static/images/app_store.png') }}" alt="El Morito en App Store"></a>
				</div>
				</div>
			</div>
		</div>
	</div>
</div>
-->

<div class="modal fade" id="show_event_modal_DOM" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" hidden.bs.modal="hola">
	<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body" id="moda_event_info_inside" style="padding: 0px;">
				
			</div>
		</div>
	</div>
</div>
@stop