@extends('master')
@section('title')
{{ $shop->name }}
@stop

@section('custom_meta')
<meta name="shop_id" content="{{ $shop->id }}">
<meta name="category_id" content="all">
@stop

@section('custom_js_files')
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<script src="{{ url('/static/js/shops.js?v='.time()) }}"></script>
@stop

@section('custom_css_files')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
@stop

@section('custom_logo')
<a class="navbar-brand sl" href="{{ url('/') }}">
	<img src="{{ config('cms.cdn') }}/platform/shop/{{ $shop->id }}/{{ $shop->logo_file_path }}/{{ $shop->logo_file_name }}">
</a>
@stop

@section('body_end_script')


@if(getIfIs('mobile'))
<script>
	new Splide( '#splide', {
		type   : 'loop',
		autoplay: true,
		interval: 4000,
	} ).mount();

	new Splide( '#splide_list', {
		perPage: 3,
		perMove: 1,
		pagination: false,
	} ).mount();
</script>
@else
<script>
	new Splide( '#splide', {
		type   : 'loop',
		autoplay: true,
		interval: 4000,
		padding: {
			right: '8rem',
			left : '8rem',
		},
	} ).mount();

	new Splide( '#splide_list', {
		perPage: 9,
		perMove: 1,
		pagination: false,
	} ).mount();
</script>
@endif
@stop

@section('nav_custom_1')
<li class="nav-item mr-auto">
	<a class="nav-link page_shop" aria-current="page" href="{{ url('/s/'.$shop->slug) }}">
		<i class="fas fa-utensils"></i> Menú
	</a>
</li>

<li class="nav-item mr-auto">
	<a class="nav-link page_shop_reserve" id="link_reservation_screen" data-shop="{{ $shop->id }}" aria-current="page" href="{{ url('/s/'.$shop->slug.'/contact') }}">
		<i class="far fa-calendar-alt"></i> Reservar
	</a>
</li>
@stop

@section('nav_custom_2')
<!--
<li class="nav-item mr-auto">
	<a class="nav-link page_shop_contact" aria-current="page" href="{{ url('/s/'.$shop->slug.'/contact') }}">
		<i class="far fa-envelope-open"></i> Contacto
	</a>
</li> -->
@stop

@section('content')
@include('components.tabs_shop')
<section>
<div class="slider">
	<div class="splide" id="splide">
		<div class="splide__track">
			<ul class="splide__list">
				@if($shop->getSliders->count() > 0)
					@foreach($shop->getSliders as $slider)
						<li class="splide__slide">
							<img src="{{ config('cms.cdn') }}/platform/shop/{{ $slider->shop_id }}/sliders/{{ $slider->file_path }}/{{ $slider->file_name }}" class="img-fluid">
						</li>
					@endforeach
				@endif
			</ul>
		</div>
	</div>
</div>
</section>

<section>
	<div class="container">
		
		<div class="categories_list">
			<div class="slider">
				<div class="splide" id="splide_list">
					<div class="splide__track">
						<ul class="splide__list" style="padding: 16px !important;">
							<li class="splide__slide">
								<div class="item shadow">
									<a href="#" class="load_products" id="lk-shop_cat_all" data-category="all">
										<img src="{{ url('/static/images/icons/logo_isologo.png') }}" class="img-fluid">
										<span class="name">Recomendaciones</span>
									</a>
								</div>
							</li>
							@foreach($shop->getCategories as $category)
							<li class="splide__slide">
								<div class="item shadow">
									<a href="#" class="load_products" id="lk-shop_cat_{{ $category->id }}" data-category="{{ $category->id }}">
										<img src="{{ config('cms.cdn') }}/platform/category/{{ $category->file_path }}/{{ $category->file_name }}" class="img-fluid">
										<span class="name">{{ $category->name }}</span>
									</a>
								</div>
							</li>
							@endforeach
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section>
	<div class="products_list">
		
		<div class="container">
			<div class="shops ptn16">
				<h2 class="title">
					<i class="fas fa-utensils"></i> Nuestro Menú <i class="fas fa-chevron-right"></i> <div class="category_name" id="category_name"></div>
				</h2>
			</div>
			<div class="row" id="products_list"></div>
		</div>
	</div>
</section>

@stop

@section('content_out_wrapper')
@include('components.product_info')
@if(Auth::check())
@include('components.shop_reservation_screen')
@endif
@stop