<div>
    <style>
		.portfolio-hover2{
	        height: 300px;
	        background: #FFF;
	        overflow: hidden;
	    }
	    .portfolio-hover2 img{
	        width: 100%;
	        height: auto;
	    }
	    @supports(object-fit: cover){
	        .portfolio-hover2 img{
	            height: 100%;
	            object-fit: cover;
	            object-position: center center;
	            transition: transform .4s;
	        }
	    }
	    .zoom:hover {
		  	transform: scale(1.2); 
		}
    </style>
	<div class="col-lg-12" align="center">
		<img src="/imgsystem/login.png" alt="" width="10%"><br>
	</div>
    <div class="col-lg-12" align="center">
  		<h1 style="font-size: 5vw;">CATALOGO DE RECOMPENSAS</h1>
	</div>
    <div class="col-12">
  		<div class="form-group">
			<input wire:model="buscar" type="search" class="form-control" placeholder="Buscar" /><hr>
  		</div>
  	</div>
    <div class="col-12">
        <div class="row" style="background-color: white;border-radius: 10px;padding: 20px">
        	<div class="col-md-9">
        		<div class="row">
		        	@foreach ($catalogos as $element)
		        		<div class="col-sm-4">
		        			<div style="background-color: white;border-radius: 20px;" align="center">
			                	<a href="{{ asset('images/catalogo/'.$element->foto) }}" data-toggle="lightbox" data-title="{{ $element->nombre }}" data-gallery="gallery">
			                		<div class="portfolio-hover2">
			                  			<img src="{{ asset('images/catalogo/'.$element->foto) }}" class="img-fluid mb-2 zoom" />
			                  		</div>
			                	</a>
			                	<h1 style="padding: 10px;color: black !important">{{ $element->nombre }}</h1>
			                	<h4><span class="badge badge-pill badge-secondary"><img src="/imgsystem/moneda.png" width="30px;">{{number_format($element->moneda, 0, '', '.')}}</span></h4>
			                	@if (in_array($element->id, Cart::getContent()->pluck('id')->toArray()))
									<button type="button" class="btn btn-outline-success" wire:click="deletecarrito({{ $element->id }})"><i class="fa fa-check-circle-o"></i> Eliminar del carrito</button>
								@else
									<button class="btn btn-warning" wire:click="addcarrito({{ $element->id }})"><i class="fa fa-shopping-cart"></i> Agregar al carrito</button>
								@endif
								<br><br>
			                </div>
		              	</div>
		        	@endforeach
		        </div>
	        </div>
	        @php
	        	$totalmonedas=0;
	        	$totalmonedasusadas=0;
	        @endphp
	        @foreach($monedas as $element)
	        	@php
		        	$totalmonedas+=$element->monedas;
		        @endphp
	        @endforeach
	        @foreach($monedasusadas as $value)
	        	@php
		        	$totalmonedasusadas+=$value->monedas;
		        @endphp
	        @endforeach
	        <div class="col-md-3"  align="center">
	        	<form action="{{ route('enviarpedido') }}" method="POST" enctype="multipart/form-data">
	        		@csrf
		        	<h1 style="color: black !important;">Disponible</h1>
		        	<h2><span class="badge badge-pill badge-secondary">{{number_format($totalmonedas-$totalmonedasusadas, 0, '', '.')}}</span></h2><hr>
		        	<h1 style="color: black !important;">Carrito</h1>
		        	@php
		        		$monedasdisponibles=$totalmonedas-$totalmonedasusadas;
						$total=0;
					@endphp
					@foreach (Cart::getContent() as $value) 
						@php
							$total+=$value->price;
						@endphp 
						<input type="hidden" name="producto_id[]" value="{{ $value->id }}" required>
						<input type="hidden" name="monedass[]" value="{{ $value->price }}" required>
					@endforeach
					@if($total > $monedasdisponibles)
						<script type="text/javascript">alert('No tienes monedas suficientes para solicitar todos los productos, porfavor elimina algunos artículos');</script>
					@endif
		        	<h2><span class="badge badge-pill badge-secondary">{{ $total }}</span><input type="number" style="width: 1px !important;height: 1px !important;background-color: white;color: white;border: 0px solid white;" name="total[]" min="1" max="{{ $monedasdisponibles }}" value="{{ $total}}" required></h2><hr>
		        	{{ $producto_id }}
		        	<button type="submit" class="btn btn-success"><i class="fa fa-shopping-cart"></i> Solicitar</button><hr>
		        </form>

	        </div>
        </div>
    </div>
    <div class="col-md-12">
    	{{ $catalogos->links() }}
    </div>	
</div>