@push('styles')
	<style media="screen">
		.produto-2{
			background: #fff;
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.produto-2 .logo{
			width: 150px;
			height: 150px;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			background-color: #ccc;
			margin: 0 auto;
			border-radius: 50%;
			margin-bottom: 10px;
		}
		.produto-2 .imagem-produto{
			background-size: cover;
			background-repeat: no-repeat;
			height: 150px;
			background-position: center center;
		}
		.produto-2 .produto-info{
			color: #333;
			padding: 0 10px;
			/* background: #f1f1f1; */
		}
		.produto-2 .item{
			box-shadow: 0 0 0 1px #ebedef;
		}
	</style>
@endpush
<div class="container-fluid produto-2">
	<div class="main box">
		<div class="logo" style="background-image: url('{{$pagina->imagem}}')"></div>
		<p class="text-center"><b>{{$pagina->titulo1}}</b></p>
		<p class="text-center mb-4">
			{{$pagina->descricao}}
		</p>
		<div class="row">
			@foreach ($pagina->produtos as $key => $produto)
				<div class="col-6 mb-4" onclick="pauseCarousel()" data-bs-toggle="modal" data-bs-target="#produtoModal{{$produto->id}}">
					<div class="item">
						<div class="imagem-produto" style="background-image: url('{{$produto->imagem}}')">
						</div>
						<div class="produto-info mt-4">
							<div class="produto-nome">
								<b>{{$produto->nome}}</b>
							</div>
							@if($produto->valor)
							<div class="produto-valor">
								R$ {{number_format($produto->valor,2,',','.')}}
							</div>
							@endif
							<div class="produto-descricao mb-4">
								{!!$produto->descricao!!}
							</div>
							<div class="d-grid gap-2">
								<button type="button" name="button" class="btn btn-primary mb-4">Visualizar</button>
							</div>
						</div>
					</div>
				</div>
			@endforeach
		</div>
	</div>
</div>
@push('scripts')
	@foreach ($pagina->produtos as $key => $produto)
	<!-- Modal -->
	<div class="modal fade" id="produtoModal{{$produto->id}}" tabindex="-1" aria-labelledby="produtoModalLabel{{$produto->id}}" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="produtoModalLabel{{$produto->id}}">{{$produto->nome}}</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="text-center">
						<img src="{{$produto->imagem}}" class="img-fluid" alt="">
					</div>
					<div class="produto-info mt-4">
						@if($produto->valor)
						<div class="produto-valor">
							R$ {{number_format($produto->valor,2,',','.')}}
						</div>
						@endif
						<div class="produto-descricao mb-4">
							{!!$produto->descricao!!}
						</div>
					</div>
					<div class="d-grid gap-2">
						<a href="{{$produto->link}}" class="btn btn-success">Comprar</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	@endforeach
	<script type="text/javascript">
		function pauseCarousel(){
			var carousel = bootstrap.Carousel.getInstance(document.querySelector('#carouselExampleIndicators'));
			carousel.pause();
		}
	</script>
@endpush