@extends('layouts.front')
@section('content')




<!-- Breadcrumb Area Start -->
	<div class="breadcrumb-area">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<ul class="pages">
			            <li>
			            	<a href="{{route('front.index')}}">{{ $langg->lang17 }}</a>
			            </li>
			            <li>
			            	<a href="javascript:;">{{ $langg->lang58 }}</a>
			            </li>
					</ul>
				</div>
			</div>
		</div>
	</div>
<!-- Breadcrumb Area End -->



<style>
	.item:hover {
    box-shadow: none !important;
    border: none  !important;
}
</style>
<!-- SubCategori Area Start -->
	<section class="sub-categori">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<h3>Nuestras Tiendas</h3><br>
					<div class="right-area">
						@if(count($products) > 0)
						<div class="categori-item-area">
							<div id="ajaxContent">
								<div class="row">
									@foreach($tiends as $tienda)
										<div class="col-md-4 ">
											<a href="{{ route('front.vendor', $tienda->shop_name) }}" class="item">
											<div class="card" style="width: 18rem;">
												<div class="card-body" >
													@if(isset($tienda->shop_image))
													<div class="vendor-banner" style="background: url({{url("/")}}/assets/images/vendorbanner/{{$tienda->shop_image}}); background-repeat: no-repeat; background-size: fill;background-position: center;  background-size: 100% auto;">
    													<div class="container">
    														<div class="row">
        														<div class="col-lg-12">
        															<div class="content">
            															<h4 class="title">
            																<span style="color: #ffffff!important;background-color:#17395c !important; "></span>
            															</h4>
        															</div>
        														</div>
    														</div>
    													</div>
													</div>
													<br>
													
													@else(isset($tienda->shop_image))
													<div class="vendor-banner" style="background: url({{url("/")}}/assets/images/vendorbanner/1561022111Vendor-pages.jpg); background-repeat: no-repeat; background-size: cover;background-position: center; ">
    													<div class="container">
    														<div class="row">
        														<div class="col-lg-12">
        															<div class="content">
            															<h4 class="title">
            																<span style="color: #ffffff!important;background-color:#17395c !important; "></span>
            															</h4>
        															</div>
        														</div>
    														</div>
    													</div>
													</div>
													<br>
													
													@endif
    												<h4 class="card-title">{{$tienda->shop_name}}</h4><br>
    												<p class="card-text"><i class="icofont-location-pin"></i> {{str_limit($tienda->shop_address,20)}}</p><br>
    												@if(filled($tienda->shop_message))
    												<p class="card-text"><i class="icofont-opencart"></i> {{str_limit($tienda->shop_message,60)}}</p><br>
    												@endif
												</div>
											</div>
											</a>
										</div>
									@endforeach
								</div>
							</div>
						</div>
						<nav aria-label="Page navigation example">
							{{ $tiends->links() }}
						</nav>
						@else
							<div class="page-center">
								<h4 class="text-center">{{ $langg->lang60 }}</h4>
							</div>
						@endif
					</div>
				</div>
			</div>
		</div>
	</section>
<!-- SubCategori Area End -->
@endsection

@section('scripts')

<script type="text/javascript">
        $("#sortby").on('change',function () {
        var sort = $("#sortby").val();
        @if(empty($sort))
		window.location = window.location.href+'&sort='+sort;
		@else
		var url = window.location.href.split("&sort");;
		window.location = url[0]+'&sort='+sort;
		@endif
    	});

	$(function () {
	  $("#slider-range").slider({
		range: true,
		orientation: "horizontal",
		min: 0,
		max: 1000,
		values: [{{ isset($_GET['min']) ? $_GET['min'] : '0' }}, {{ isset($_GET['max']) ? $_GET['max'] : '1000' }}],
		step: 5,

		slide: function (event, ui) {
		  if (ui.values[0] == ui.values[1]) {
			  return false;
		  }

		  $("#min_price").val(ui.values[0]);
		  $("#max_price").val(ui.values[1]);
		}
	  });

	  $("#min_price").val($("#slider-range").slider("values", 0));
	  $("#max_price").val($("#slider-range").slider("values", 1));

	});
</script>

@endsection