@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="index1.html">Home<i class="ti-arrow-right"></i></a></li>
						<li><a class="alert alert-success" href=""><strong>Estas en:</strong> {{ $id_categoria[0]->nombre_categoria }}</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>-->

<div class="container-fluid mt-3 mb-5">
	<div class="row">
		<div class="col-md-4">
			@if(session('cart'))
				<div class="alert alert-success">{{ session('cart') }}</div>	
			@endif


			@php

			$pdocrud = new_PDOCrud();
			$pdomodel = $pdocrud->getPDOModelObj();
			$pdomodel->fetchType = "Obj";
			$categorias = $pdomodel->select("categorias");


			@endphp

			<!--  ================== MEDIA BOXES ================== -->
		
		<div class="filters-container">

            <!--<div class="media-boxes-search">
                <span class="media-boxes-icon fa fa-search"></span>
                <input type="text" id="search" placeholder="Search by title">
                <span class="media-boxes-clear fa fa-close"></span>
            </div>-->

           	<!--<div class="row">

           		<div class="col-md-12">
           			<div class="card mb-3">
					  <ul class="list-group list-group-flush">
					    <li class="list-group-item font-weight-bold">Buscar Productos</li>
					    <li class="list-group-item">
					    	
					    	<div class="input-group md-form form-sm form-1 pl-0">
							  <div class="input-group-prepend p-2 bg-info">
							    <span class="input-group-text purple lighten-3 px-2" id="basic-text1"><i class="fa fa-search text-white"
							        aria-hidden="true"></i></span>
							  </div>
							  <input type="text" class="form-control p-2" id="search" autocomplete="off">
							</div>

					    </li>
					  </ul>
					</div>
           		</div>

           		<!--<div class="col-md-12">

           			<div class="card mb-4">
					  <ul class="list-group list-group-flush">
					    <li class="list-group-item font-weight-bold">Filtrar por Categorias</li>
					    <li class="list-group-item">
					    	
		           			<div class="media-boxes-drop-down">
				                <div class="media-boxes-drop-down-header">
				                </div>
				                <ul class="media-boxes-drop-down-menu filters" data-id="first-filter">
				                  <li><a class="selected" href="#" data-filter="*">Todo</a></li>
				                  @foreach($categorias as $categoria)
				                  <li><a href="#" data-filter=".{{ $categoria->nombre_categoria }}">{{ $categoria->nombre_categoria }}</a></li>
				                  @endforeach
				                 
				                </ul>
				            </div>

					    </li>
					  </ul>
					</div>

           			
           		</div>
           		<div class="col-md-12">

           			<div class="card mb-4">
					  <ul class="list-group list-group-flush">
					    <li class="list-group-item font-weight-bold">Filtrar por Precio</li>
					    <li class="list-group-item">
					    	
					    	<div class="media-boxes-drop-down">
				                <div class="media-boxes-drop-down-header">
				                </div>
				                <ul class="media-boxes-drop-down-menu filters" data-id="second-filter">
				                  <li><a class="selected" href="#" data-filter="*">Todo</a></li>
				                  @foreach($id_categoria as $productos) 
				                  <li><a href="#" data-filter=".{{ $productos->precio }}">${{ number_format($productos->precio, 0, ',', '.') }}</a></li>
				                  @endforeach
				                  
				                </ul>
				            </div>

					    </li>
					    
					  </ul>
					</div>

           			
           			
           		</div>
           		<div class="col-md-12">

           			<div class="card">
					  <ul class="list-group list-group-flush">
					    <li class="list-group-item font-weight-bold">Filtrar por Nombre</li>
					    <li class="list-group-item">
					    	
					    	<div class="media-boxes-drop-down">
				                <div class="media-boxes-drop-down-header">
				                </div>
				                <ul class="media-boxes-drop-down-menu filters" data-id="third-filter" >
				                  <li><a class="selected" href="#" data-filter="*">Todo</a></li>
				                  @foreach($id_categoria as $productos) 
				                  <li><a href="#" data-filter=".{{ $productos->id }}">{{ $productos->nombre }}</a></li>
				                  @endforeach
				                </ul>
				            </div>

					    </li>
					  </ul>
					</div>

           			
           			
           		</div>
           	</div>-->
    
            

            

            

            

        </div>


				
		</div>

		<div class="col-md-12">
			
					<div class="grid-section">


		<div class="content grid-container">

		
		<div id="grid">

		<!-- -------------------------- BOX MARKUP -------------------------- -->     
			@foreach($id_categoria 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 class="single-product">
									<div class="product-img">
										<a href="/decoart/producto/{{ $productos->id }}">
											<img class="default-img" src="{{ $productos->imagen }}" alt="#">
											<img class="hover-img" src="{{ $productos->imagen }}" alt="#">
										</a>
										<div class="button-head">
											<div class="product-action">
												<a data-toggle="modal" data-target="#modal_{{ $productos->id }}" title="Quick View" class="btn-sm" href="#"><i class=" ti-eye"></i><span>Vista rápida</span></a>
											</div>
											<div class="product-action-2">
												<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-sm" name="btn" value="Agregar al carrito">
												</form>
											</div>
										</div>
									</div>
									<div class="product-content">
										<h3><a href="#">{{ $productos->nombre }}</a></h3>
										<div class="product-price">
											<span>{{ $productos->precio }}</span>
										</div>
									</div>
								</div>-->

                        	</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_en_euro }}</div>
							@endif
			            </div>

                   
                </div>

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

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

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

	</div>

		</div>
	</div>
</div>




@foreach($id_categoria as $productos)
<div class="modal fade" id="modal_{{ $productos->id }}" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="ti-close" aria-hidden="true"></span></button>
            </div>
            <div class="modal-body">
                <div class="row no-gutters">
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                       <img class="w-100" src="{{ $productos->imagen }}">
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                      <div class="quickview-content">
                                    <h2>{{ $productos->nombre }}</h2>
                                    <div class="quickview-ratting-review">
                                        <div class="quickview-ratting-wrap">
                                            <div class="quickview-ratting">
                                                <i class="yellow fa fa-star"></i>
                                                <i class="yellow fa fa-star"></i>
                                                <i class="yellow fa fa-star"></i>
                                                <i class="yellow fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                            <a href="#"> (1 customer review)</a>
                                        </div>
                                        <div class="quickview-stock">
                                            <span><i class="fa fa-check-circle-o"></i> En stock</span>
                                        </div>
                                    </div>
                                    <h3 class="precio_producto">$ {{ number_format($productos->precio, 0, ',', '.') }}</h3>
                                    <div class="quickview-peragraph">
                                       
                                    </div>
									<div class="size">
										
									</div>
                                   
                                   	

									<form method="POST" action="{{route('cart.add')}}">
					                    @csrf
					                    <div class="form-group">
					                        <label class="d-none">Id</label>
					                        <input type="hidden" name="producto_id" class="form-control id_productos" id="id" value="{{ $productos->id }}">
					                    </div>
					                    <div class="form-group">
					                        <label class="d-none">Nombre</label>
					                        <input type="hidden" name="name" class="form-control" id="name" value="{{ $productos->nombre }}">
					                    </div>
					                    <div class="form-group">
					                        <label class="d-none">Precio</label>
					                        <input type="hidden" name="price" class="form-control" id="price" value="{{ $productos->precio }}">
					                    </div>
					                    <div class="form-group">
					                        <label>Cantidad</label>
					                        <input type="number" name="quantity" class="form-control cantidad_producto p-2" id="quantity" value="1">
					                    </div>

					                	<div class="row">
					                        <div class="col-md-6">
					                          <label>Ancho</label>
					                          <input type="number" name="ancho" class="form-control mb-4 ancho_producto p-2" id="ancho_producto" value="50">
					                        </div>
					                        <div class="col-md-6">
					                          <label>Alto</label>
					                          <input type="number" name="alto" class="form-control alto mb-4 alto_producto p-2" id="alto_producto" value="50">
					                        </div>
					                    </div>
					                    
					                    <button type="submit" class="btn btn-primary">Agregar al carrito</button>
					                </form>


                                    
                                </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endforeach



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