@extends('web.master')

@section('content')

<style>

	/* == LETS MODIFY SOME COLORS AND STYLE FOR THE DEMO == */
	
		/* Change the style of the text */
		.media-box-text{
			color: #6B6B6B;
			line-height: 21px;
		}

		/* Change style of title */
		.media-box-title{
			color: #444;
			font-weight: 100;
			font-size: 13px;
			text-transform: capitalize;
		}

		/* Remove the white background of the content area */
		.media-box-content{
			background: transparent;
			padding: 20px 0;
		}

		/* Remove box shadow from the media boxes */
		.media-box-container{
			  -webkit-border-radius: 0px;
			  	 -moz-border-radius: 0px;
			  		  border-radius: 0px;

			  -webkit-box-shadow: none;
			  	 -moz-box-shadow: none;
			  	   -o-box-shadow: none;
			      -ms-box-shadow: none;
			  		  box-shadow: none;
		}
		
		/* Style of the thumbnail-overlay */
		.thumbnail-overlay{
			background: transparent;
		}

		/* change bootstrap style of the buttons */
		.btn{
			background-color: #e54e53;
			color: #fff!important;
			margin: 5px;
			border: none !important;
			
			-webkit-border-radius: 2px;
				 -o-border-radius: 2px;
			   -moz-border-radius: 2px;
				    border-radius: 2px;
		}
		.btn:hover, .btn:active, .btn:focus{
			background-color: #E15C61;
		}

		/* Remove overflow hidden from media-box-container */
		.media-box-container {
    		overflow: visible; 
		}

		/* Center filters */
		.filters-container{
			text-align: center;
			margin-bottom: 30px;
		}

	</style>

<div class="breadcrumbs">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="bread-inner">
					<ul class="bread-list">
						<li><a href="{{ route('home') }}">Inicio<i class="ti-arrow-right"></i></a></li>
						<li class="active"><a href="{{ route('buscador') }}">Busqueda</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container mb-5">
	<div class="row">
	<div class="col-md-12">
		<div class="content grid-container">

		<h6 class="text-center p-4 alert alert-success"><strong>Resultados</strong> de la Busqueda para: {{ $search }} </h6>
		
		<div id="grid">

		<!-- -------------------------- BOX MARKUP -------------------------- -->     
			@foreach($product_load as $productos) 

				<div class="media-box {{ $productos->categoria }} {{ $productos->precio }} {{ $productos->id }}">
                    <div class="media-box-image">
                        <div data-width="400" data-height="400" data-thumbnail="{{ $productos->imagen }}"></div>
                        
                        <div class="thumbnail-overlay">
                            
                        	<!--<form action="{{ route('cart.add') }}" method="POST">
								@csrf
								<input type="hidden" name="producto_id" value="{{ $productos->id }}">
								<input type="hidden" value="1" name="quantity">
								<input type="hidden" name="price" id="price" value="{{ $productos->precio }}">
								<input type="hidden" name="ancho" class="form-control mb-4 ancho_producto p-2" id="ancho_producto" value="50">
								<input type="hidden" name="alto" class="form-control alto mb-4 alto_producto p-2" id="alto_producto" value="50">
								<input type="submit" class="btn btn-default btn-sm" name="btn" value="Agregar al carrito">
							</form>-->
	                      	<a href="/producto/{{ $productos->id }}" class="btn btn-sm btn-default text-white">
	                      		<span class="fa fa-search"></span>&nbsp; Ver
	                      	</a>

                        	</div>
                         </div>

                         <div class="media-box-content">
			                <div class="media-box-title font-weight-bold">{{ $productos->nombre }}</div>
							@if(session('banderas') == "Chile")
			                <div class="media-box-price">${{ number_format($productos->precio, 0, ',', '.') }}</div>
							@else
							<div class="media-box-price">€{{ $productos->precio }}</div>
							@endif
			            </div>

                   
                </div>

			@endforeach
		
		</div> <!-- #grid -->		

	    <!--  ================== END MEDIA BOXES ================== -->

		</div> <!-- #grid-container -->	
	</div>
</div>
</div>

<script src="{{ asset('theme/js/jquery.min.js') }}"></script>
<script src="{{ asset('theme/js/jquery-ui.min.js') }}"></script>
@endsection