@push('styles')
	<style media="screen">
		.whatsapp-2{
			background: #076056;
			color: #ffffff;
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.whatsapp-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;
		}
		.whatsapp-2 .imagem-produto{
			background-size: cover;
			background-repeat: no-repeat;
			height: 150px;
			background-position: center center;
		}
		.whatsapp-2 .produto-info{
			color: #333;
			padding: 0 10px;
			/* background: #f1f1f1; */
		}
		.whatsapp-2 .item{
			background: #fff;
			color: #333;
			padding: 10px;
			border-radius: 10px;
			margin-bottom: 10px;
		}
		.whatsapp-2 .imagem-produto{
			width: 80px;
			height: 80px;
			border-radius: 50%;
			margin-right: 15px;
			float: left;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			background-color: #ccc;
		}
		.whatsapp-2 em{
			font-style: normal;
		}
	</style>
@endpush
<div class="container-fluid whatsapp-2">
	<div class="main box">
		<h3 class="text-center">{{$pagina->titulo2}}</h3>
		<p class="text-center mb-4">
			<em>{!!$pagina->descricao!!}</em>
		</p>
		<div class="row">
			@foreach ($pagina->produtos as $key => $produto)
				<div class="col-12 mb-4">
					<div class="item">
						<div class="row">
							<div class="col-12">
								<div class="imagem-produto" style="background-image: url('{{$produto->imagem}}')">
								</div>
								<div class="produto-info">
									<div class="produto-nome">
										<b>{{$produto->nome}}</b>
									</div>
									<div class="produto-descricao mb-4">
										{!!$produto->descricao!!}
									</div>
								</div>
							</div>
						</div>
						<div class="d-grid gap-2 mt-4">
							<a href="{{$produto->link}}" name="button" class="btn btn-success mb-4"><i class="fa fa-whatsapp"></i> Converse comigo</a>
						</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();
		}
		function playCarousel(){
			var carousel = bootstrap.Carousel.getInstance(document.querySelector('#carouselExampleIndicators'));
			carousel.pause();
		}
	</script>
@endpush