Sindbad~EG File Manager

<div>
    <style>
		body {
			background-image: url('/frontend/ranking.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
		.portfolio-hover2{
			height: 225px;
			background: #FFF;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.portfolio-hover2 img{
			max-width: 80%;
			max-height: 60%;
			object-fit: contain;
			object-position: center center;
		}
	    @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); 
		}
		.carousel-item {
			transition: transform 0.5s ease-in-out;
		}

		.carousel-control-prev-icon,
		.carousel-control-next-icon {
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			padding: 10px;
		}

		.carousel-inner .carousel-item {
			margin-right: 15px;
		}

		.carousel-control-prev,
		.carousel-control-next {
			width: 5%;
		}
    </style>
    <div class="col-lg-12" align="center">
  		<h1 style="font-size: 3vw;">Catálogo</h1>
		<br>
	</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: 10px 20px;">
        	<div class="col-md-9">
				<div id="productCarousel" class="carousel slide" data-ride="carousel">
					<div class="carousel-inner">
						@foreach ($catalogos->chunk(4) as $index => $chunk)
							<div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
								<div class="row">
									@foreach ($chunk as $element)
										<div class="col-sm-3">
											<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-top: 4px;color: black !important"><strong>{{ $element->nombre }}</strong></h1>
												<h6  style="font-size: 0.6em; font-weight: bold;"><strong>Stock ({{ $element->stock }})</strong></h6>
												<h6  style="font-size: 1em; font-weight: bold;"><span class="badge badge-pill badge-secondary"><img src="/imgsystem/moneda.png" width="25px;">{{number_format($element->moneda, 0, '', '.')}}</span></h6>
												@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
    <div class="d-flex justify-content-center align-items-center">
        <input type="number" min="1" max="{{ $element->stock }}" wire:model.defer="cantidades.{{ $element->id }}" class="form-control form-control-sm mr-2" style="width: 60px;" placeholder="1">
        <button class="btn btn-warning" wire:click="addcarrito({{ $element->id }})" style="font-size: 0.8em; font-weight: bold;">
            Agregar
        </button>
    </div>
@endif
												<br><br>
											</div>
										</div>
									@endforeach
								</div>
							</div>
						@endforeach
					</div>
					<a class="carousel-control-prev" href="#productCarousel" role="button" data-slide="prev">
						<img src="/frontend/prev.png" alt="Anterior" style="width: 50px;">
						<span class="sr-only">Anterior</span>
					</a>
					<a class="carousel-control-next" href="#productCarousel" role="button" data-slide="next">
						<img src="/frontend/next.png" alt="Siguiente" style="width: 50px;">
						<span class="sr-only">Siguiente</span>
					</a>
				</div>
	        </div>
	        @php
	        	$totalmonedas=0;
	        	$totalmonedasusadas=0;
	        @endphp
	        	@php
		        	$totalmonedas=$monedas;
		        @endphp
	        @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, 0, '', '.')}}</span></h2><hr>
		        	<h1 style="color: black !important;">Carrito</h1>
		        	@php
		        		$monedasdisponibles=$totalmonedas;
						$total=0;
					@endphp
					@foreach (Cart::getContent() as $value) 
						@php
							$total+=$value->price*$value->quantity;
						@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="button" class="btn btn-success" data-toggle="modal" data-target=".carrito-modal">
						Ver Carrito
					</button><hr>
					<div class="modal fade carrito-modal" wire:ignore.self tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
						<div class="modal-dialog modal-lg">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Carrito de pedidos</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<table class="table">
										<thead>
											<tr>
												<th scope="col">Producto</th>
												<th scope="col"><center>Cantidad</center></th>
												<th scope="col"><center>Acciones</center></th>
											</tr>
										</thead>
										<tbody>
											@foreach(Cart::getContent() as $prod)
												<tr>
													<td>{{$prod->name}}</td>
													<td align="center">
														<button type="button" class="btn btn-sm btn-success" wire:click="menoscarrito({{$prod->id}})">
															&#8249;
														</button>
														{{$prod->quantity}}
														<button type="button" class="btn btn-sm btn-success" wire:click="mascarrito({{$prod->id}})">
															&#8250;
														</button>
													</td>
													<td align="center">
														<button type="button" class="btn btn-sm btn-danger" wire:click="deletecarrito({{$prod->id}})">
															x
														</button>
													</td>
												</tr>
											@endforeach
										</tbody>
									</table>
								</div>
								<div class="modal-footer">
									<button type="submit" class="btn btn-success">Realizar pedido</button>
								</div>
							</div>
						</div>
					</div>
		        </form>
	        </div>
        </div>
    </div>
    <div class="col-md-12">
    	{{ $catalogos->links() }}
    </div>	
	<br> <br> <br> <br><br>
</div>