@extends('web.master')

@section('content')

<style>
	.page-title.clearfix.card-header.pdocrud-table-heading.bg-white.border-0 {
		display: none;
	}
	.page-title.clearfix.card-header.pdocrud-table-heading {
		display: none;
	}

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

		.media-boxes-no-more-entries {
			display: none;
		}

		/* 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>


<!-- Slider Area -->
	<section class="hero-slider">
		
	<div id="wowslider-container1">
	<div class="ws_images"><ul>
		@foreach($banner as $banners)
		<li><a href="https://decoart.onlineweb.cl/todos-los-productos"><img src="{{ $banners->imagen }}" alt="{{ $banners->titulo }}" title="{{ $banners->titulo }}" id="wows{{ $banners->id_banner }}"/></a></li>
		@endforeach
	</ul></div>
	<div class="ws_bullets"><div>
		@foreach($banner as $banners)
		<a href="https://decoart.onlineweb.cl/todos-los-productos" title="fdfdf"><span><img class="thumb_slider" src="{{ $banners->imagen }}" alt="{{ $banners->titulo }}"/>{{ $banners->id_banner }}</span></a>
		@endforeach
	</div></div><div class="ws_script" style="position:absolute;left:-99%"></div>
	<div class="ws_shadow"></div>
	</div>	
	<script type="text/javascript" src="{{ asset('theme/engine1/wowslider.js') }}"></script>
	<script type="text/javascript" src="{{ asset('theme/engine1/script.js') }}"></script>


	</section>
	<!--/ End Slider Area -->
	
	<!-- Start Small Banner  -->
	<section class="small-banner section">
		<div class="container-fluid">
			<div class="row">
				<!-- Single Banner  -->
				@foreach($productos_destacados as $pro)
				<div class="col-lg-4 col-md-6 col-12">
					<div class="single-banner" style="height: 315px;">
						<img class="img" src="{{ $pro->imagen }}" alt="#">
						<div class="content">
							<h3 class="bg-white text-dark p-2">{{ $pro->nombre }}</h3>
							<a class="btn btn-info btn-sm text-white" href="/producto/{{ $pro->id }}">Ver más</a>
						</div>
					</div>
				</div>
				@endforeach
				<!-- /End Single Banner  -->
				<!-- Single Banner  -->
				
			</div>
		</div>
	</section>
	<!-- End Small Banner -->
	
	<!-- Start Product Area -->
    <div class="product-area section">
            <div class="container-fluid">
				<div class="row">
					<div class="col-12">
						<div class="section-title mb-4">
							<h2>Productos</h2>
						</div>
					</div>
				</div>

				@if(session('success'))
					<div class="alert alert-success">{{ session('success') }}</div>
				@endif

				<div class="row">
					<div class="col-12">

						<div class="content grid-container">

		
		<div id="grid">

		<!-- -------------------------- BOX MARKUP -------------------------- -->     
			@foreach($datos 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_en_euro }}</div>
							@endif
			            </div>

                   
                </div>

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

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

		</div> <!-- #grid-container -->	
						
					</div>
				</div>
				<div class="row mt-0">
					<div class="col-12 text-center">
						<div class="button">
							<a href="{{ route('todos_los_productos') }}" class="btn text-white px-4">Todos los Productos</a>
						</div>
					</div>
				</div>
            </div>
    </div>
	<!-- End Product Area -->
	
	<!-- Start Midium Banner  -->
	<!--<section class="midium-banner mb-5">
		<div class="container">
			<div class="row">
				
				<div class="col-lg-6 col-md-6 col-12">
					<div class="single-banner">
						<img src="https://via.placeholder.com/600x370" alt="#">
						<div class="content">
							<p>Man's Collectons</p>
							<h3>Man's items <br>Up to<span> 50%</span></h3>
							<a href="#">Shop Now</a>
						</div>
					</div>
				</div>
				
				<div class="col-lg-6 col-md-6 col-12">
					<div class="single-banner">
						<img src="https://via.placeholder.com/600x370" alt="#">
						<div class="content">
							<p>shoes women</p>
							<h3>mid season <br> up to <span>70%</span></h3>
							<a href="#" class="btn">Shop Now</a>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</section>-->
	<!-- End Midium Banner -->



@foreach($datos 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_producto" 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_producto" 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>
<script>
	$(document).on("keyup change", function(){

		var ancho = $('.ancho').val();

		$.ajax({
        type: "POST",
        url: "{{ route('obt_precio') }}",
        dataType: "json",
        data: { ancho: ancho, _token: "{{ csrf_token() }}" },
        success: function(obt){
          
         console.log(obt);
         
         if(ancho != ""){
         	$('.precio_producto').html("$" + obt[0].precio);
         	$('.precio_producto').attr("value", + obt[0].precio);
         }

        }
      });
	});

	/* obtenemos el Intrinsic size tanto el ancho como el alto de la imagen */
	/*$(document).ready(function(){
		let img_width = document.querySelector(".img").naturalWidth;
		let img_height = document.querySelector(".img").naturalHeight;
		console.log(img_width);
		console.log(img_height);
	});*/
</script>
@endsection