<?php import_file(DIR_TEMPLATES."header_website.php", ["title" => ""]); ?>
<?php import_file(DIR_MODELS."Model.class.php"); ?>

<?php 

	$model = new Model();

?>

<?php 

	$result = $model->query("
		SELECT * FROM slide_home_page 
		WHERE 
			tipo_slide_home_page = 'Cabeçalho'
	");

	$count = 0;

?>

<div id="slide-header" class="carousel slide carousel-fade mb-4" data-ride="carousel">
	<div class="carousel-inner">
		<?php foreach ($result->fetchAll() as $i): ?>
			<div class="carousel-item <?php echo ($count == 0) ? "active" : ""; ?>">
				<?php if (!empty($i->link_slide_home_page) and $i->link_slide_home_page !== "#"): ?>
					<a href="<?php echo $i->link_slide_home_page; ?>" target="_blank">
						<img src="<?php echo show_link($i->imagem_slide_home_page); ?>" class="carousel-img-custom">
					</a>
				<?php else: ?>
					<img src="<?php echo show_link($i->imagem_slide_home_page); ?>" class="carousel-img-custom">
				<?php endif ?>
			</div>
			<?php $count++; ?>
		<?php endforeach; ?>
	</div>
	<a class="carousel-control-prev" href="#slide-header" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#slide-header" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

<?php 

	$result = $model->query("
		SELECT * FROM produto
		WHERE 
			status_produto = 'S' AND
			quantidade_produto > 0 AND
			produto_destaque = 'S'
		ORDER BY 
			RAND() 
		LIMIT 12
	");

?>

<div class="container mb-3">
	<h4 class="text-center mb-4">Destaques</h4>

	<div class="mb-4">
		<div id="produto-destaque" class="owl-carousel">
			<?php foreach ($result->fetchAll() as $i): ?>
				<div class="mx-2">
					<div class="card" style="width: 100%; height: 320px;">
						<div 
							class="card-img-top" 
							style="
								width: 100%;
								height: 150px;
								background-image: url('<?php echo show_link($i->imagem_produto); ?>');
								background-repeat: no-repeat;
								background-position: center;
								background-size: cover;
						"></div>
						<div class="card-body border-top" style="padding: 0.75rem;">
							<a href="<?php echo show_link("/produto/?produto=".urlencode(encrypt_encode($i->id_produto))); ?>" class="link-produto" style="text-decoration: none;">
								<div class="card-title" style="min-height: 50px; font-size: 17px;">
									<?php echo compress_string($i->nome_produto, 50); ?>	
								</div>
							</a>
							<div class="card-text">
								<div class="form-row align-items-center">
									<div class="col-12" style="height: 50px;">
										<?php if (!empty($i->porcentagem_desc_cliente)): ?>
											<div class="text-secondary" style="text-decoration: line-through; font-size: 13px;">
												<?php echo money_mask_BR($i->valor_produto); ?>
											</div>
											<div class="text-success" style="font-size: 20px;">
												<strong><?php echo money_mask_BR($i->valor_produto - ($i->valor_produto * pct($i->porcentagem_desc_cliente))); ?></strong>
											</div>
										<?php else: ?>
											<div class="text-success" style="font-size: 20px;">
												<strong><?php echo money_mask_BR($i->valor_produto - ($i->valor_produto * pct($i->porcentagem_desc_cliente))); ?></strong>
											</div>
										<?php endif; ?>
									</div>
									<div class="col text-right mt-2 mb-0" style="height: 30px;">
										<?php if (!empty($i->porcentagem_cashback)): ?>
											<span class="badge badge-info">
												<?php echo "Cashback ".number_format($i->porcentagem_cashback, 2, ",", "")."%"; ?>	
											</span>
										<?php endif; ?>
										<?php if (!empty($i->porcentagem_desc_cliente)): ?>
											<span class="badge badge-success">
												<?php echo "<i class='fa-solid fa-arrow-down'></i> ".number_format($i->porcentagem_desc_cliente, 2, ",", "")."%"; ?>	
											</span>
										<?php endif; ?>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
	</div>

	<script>
		$(function() {
			var produto_destaque = $("#produto-destaque").owlCarousel({
				items: 4, 
				itemsDesktop: [1200,4], 
				itemsDesktopSmall: [900,3], 
				itemsTablet: [600,2],
				itemsMobile: [500,1],
				lazyLoad: true
			});
		});
	</script>

	<h4 class="text-center mb-4">Categorias dos Produtos</h4>

	<div class="mb-4">
		<div id="corousel-categoria" class="owl-carousel">
			<?php 

				$result = $model->query("
					SELECT * FROM categoria 
					WHERE
						status_categoria = 'S'
				");

				for ($i=0; $i < ceil($result->rowCount()/2); $i++):
					$j = $result->fetch();

			?>
				<div>
					<a href="<?php echo show_link("/pesquisa-produtos/?categoria=".$j->id_categoria); ?>" class="item my-0" style="text-decoration: none;" onmouseover="this.style.textDecoration='none'">
						<div class="card-categoria" style="margin-top: 0.2rem; margin-bottom: 0.2rem; margin-left: 0.1rem; margin-right: 0.1rem;">
							<div class="card card-body text-center" style="margin: auto; width: 100%; height: 155px; padding: 10px;">
								<div style="margin: auto;">
									<i class="<?php echo $j->icone_categoria; ?> fa-4x"></i>
									<p class="pt-2 mb-0"><?php echo $j->nome_categoria; ?></p>
								</div>
							</div>
						</div>
					</a>
					<?php 

						$j = $result->fetch();

						if (!empty($j)): 

					?>
						<a href="<?php echo show_link("/pesquisa-produtos/?categoria=".$j->id_categoria); ?>" class="item my-0" style="text-decoration: none;" onmouseover="this.style.textDecoration='none'">
							<div class="card-categoria" style="margin-top: 0.2rem; margin-bottom: 0.2rem; margin-left: 0.1rem; margin-right: 0.1rem;">
								<div class="card card-body text-center" style="margin: auto; width: 100%; height: 155px; padding: 10px;">
									<div style="margin: auto;">
										<i class="<?php echo $j->icone_categoria; ?> fa-4x"></i>
										<p class="pt-2 mb-0"><?php echo $j->nome_categoria; ?></p>
									</div>
								</div>
							</div>
						</a>
					<?php endif; ?>
				</div>
			<?php endfor; ?>
		</div>

		<script>
			$(function() {
				var owlBem = $("#corousel-categoria");
				owlBem.owlCarousel({
					items: 6, 
					itemsDesktop: [1200,6], 
					itemsDesktopSmall: [900,4], 
					itemsTablet: [600,2],
					itemsMobile: [500,2]
				});
			});
		</script>
	</div>

	<?php 

		$result = $model->query("
			SELECT * FROM produto
			WHERE 
				status_produto = 'S' AND
				quantidade_produto > 0 AND
				porcentagem_cashback IS NOT NULL
			ORDER BY 
				RAND() 
			LIMIT 12
		");

	?>

	<h4 class="text-center mb-4">Campeões do Cashback</h4>

	<div class="mb-4">
		<div id="produto-cashback" class="owl-carousel">
			<?php foreach ($result->fetchAll() as $i): ?>
				<div class="mx-2">
					<div class="card" style="width: 100%; height: 320px;">
						<div 
							class="card-img-top" 
							style="
								width: 100%;
								height: 150px;
								background-image: url('<?php echo show_link($i->imagem_produto); ?>');
								background-repeat: no-repeat;
								background-position: center;
								background-size: cover;
						"></div>
						<div class="card-body border-top" style="padding: 0.75rem;">
							<a href="<?php echo show_link("/produto/?produto=".urlencode(encrypt_encode($i->id_produto))); ?>" class="link-produto" style="text-decoration: none;">
								<div class="card-title" style="min-height: 50px; font-size: 17px;">
									<?php echo compress_string($i->nome_produto, 50); ?>	
								</div>
							</a>
							<div class="card-text">
								<div class="form-row align-items-center">
									<div class="col-12" style="height: 50px;">
										<?php if (!empty($i->porcentagem_desc_cliente)): ?>
											<div class="text-secondary" style="text-decoration: line-through; font-size: 13px;">
												<?php echo money_mask_BR($i->valor_produto); ?>
											</div>
											<div class="text-success" style="font-size: 20px;">
												<strong><?php echo money_mask_BR($i->valor_produto - ($i->valor_produto * pct($i->porcentagem_desc_cliente))); ?></strong>
											</div>
										<?php else: ?>
											<div class="text-success" style="font-size: 20px;">
												<strong><?php echo money_mask_BR($i->valor_produto - ($i->valor_produto * pct($i->porcentagem_desc_cliente))); ?></strong>
											</div>
										<?php endif; ?>
									</div>
									<div class="col text-right mt-2 mb-0" style="height: 30px;">
										<?php if (!empty($i->porcentagem_cashback)): ?>
											<span class="badge badge-info">
												<?php echo "Cashback ".number_format($i->porcentagem_cashback, 2, ",", "")."%"; ?>	
											</span>
										<?php endif; ?>
										<?php if (!empty($i->porcentagem_desc_cliente)): ?>
											<span class="badge badge-success">
												<?php echo "<i class='fa-solid fa-arrow-down'></i> ".number_format($i->porcentagem_desc_cliente, 2, ",", "")."%"; ?>	
											</span>
										<?php endif; ?>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
	</div>

	<script>
		$(function() {
			var produto_destaque = $("#produto-cashback").owlCarousel({
				items: 4, 
				itemsDesktop: [1200,4], 
				itemsDesktopSmall: [900,3], 
				itemsTablet: [600,2],
				itemsMobile: [500,1],
				lazyLoad: true
			});
		});
	</script>

	<h4 class="text-center mb-4">Categorias das Lojas</h4>

	<div class="mb-4">
		<div id="corousel-categoria-loja" class="owl-carousel">
			<?php 

				$result = $model->query("
					SELECT * FROM categoria_loja 
					WHERE
						status_categoria_loja = 'S'
				");

				for ($i=0; $i < ceil($result->rowCount()/2); $i++):
					$j = $result->fetch();

			?>
				<div>
					<a href="<?php echo show_link("/pesquisa-lojas/?categoria=".$j->id_categoria_loja); ?>" class="item my-0" style="text-decoration: none;" onmouseover="this.style.textDecoration='none'">
						<div class="card-categoria" style="margin-top: 0.2rem; margin-bottom: 0.2rem; margin-left: 0.1rem; margin-right: 0.1rem;">
							<div class="card card-body text-center" style="margin: auto; width: 100%; height: 155px; padding: 10px;">
								<div style="margin: auto;">
									<i class="<?php echo $j->icone_categoria_loja; ?> fa-4x"></i>
									<p class="pt-2 mb-0"><?php echo $j->nome_categoria_loja; ?></p>
								</div>
							</div>
						</div>
					</a>
					<?php 

						$j = $result->fetch();

						if (!empty($j)): 

					?>
						<a href="<?php echo show_link("/pesquisa-lojas/?categoria=".$j->id_categoria_loja); ?>" class="item my-0" style="text-decoration: none;" onmouseover="this.style.textDecoration='none'">
							<div class="card-categoria" style="margin-top: 0.2rem; margin-bottom: 0.2rem; margin-left: 0.1rem; margin-right: 0.1rem;">
								<div class="card card-body text-center" style="margin: auto; width: 100%; height: 155px; padding: 10px;">
									<div style="margin: auto;">
										<i class="<?php echo $j->icone_categoria_loja; ?> fa-4x"></i>
										<p class="pt-2 mb-0"><?php echo $j->nome_categoria_loja; ?></p>
									</div>
								</div>
							</div>
						</a>
					<?php endif; ?>
				</div>
			<?php endfor; ?>
		</div>

		<script>
			$(function() {
				var owlBem = $("#corousel-categoria-loja");
				owlBem.owlCarousel({
					items: 6, 
					itemsDesktop: [1200,6], 
					itemsDesktopSmall: [900,4], 
					itemsTablet: [600,2],
					itemsMobile: [500,2]
				});
			});
		</script>
	</div>
</div>

<?php 

	$result = $model->query("
		SELECT * FROM slide_home_page 
		WHERE 
			tipo_slide_home_page = 'Rodapé'
	");

	$count = 0;

?>

<div id="slide-footer" class="carousel slide carousel-fade my-4" data-ride="carousel">
	<div class="carousel-inner">
		<?php foreach ($result->fetchAll() as $i): ?>
			<div class="carousel-item <?php echo ($count == 0) ? "active" : ""; ?>">
				<a href="<?php echo $i->link_slide_home_page; ?>" target="_blank">
					<img src="<?php echo show_link($i->imagem_slide_home_page); ?>" class="carousel-img-custom">
				</a>
			</div>
			<?php $count++; ?>
		<?php endforeach; ?>
	</div>
	<a class="carousel-control-prev" href="#slide-footer" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#slide-footer" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

<div class="container mb-3">
	<?php 

		$result = $model->query("
			SELECT * FROM loja
			ORDER BY 
				RAND()
			LIMIT 8
		");

	?>

	<h4 class="text-center mb-4">Lojas Parceiras</h4>
	
	<div id="lojas" class="owl-carousel">
		<?php foreach ($result->fetchAll() as $i): ?>
			<div class="mx-2">
				<a href="<?php echo show_link("/visualizar-loja/?loja=".urlencode(encrypt_encode($i->id_loja))."&pesquisa=".$pesquisa."&categoria=".$id_categoria."&estado=".$id_estado."&cidade=".$id_cidade."&pag=".$pagina); ?>" class="link-produto" style="text-decoration: none;">
					<div class="card">
						<div 
							class="card-img-top" 
							style="
								width: 100%; 
								height: 230px;
								background-image: url('<?php echo show_link($i->banner_loja); ?>');
								background-repeat: no-repeat;
								background-position: center;
								background-size: cover;
						"></div>
					</div>
				</a>
			</div>
		<?php endforeach; ?>
	</div>

	<script>
		$(function() {
			var produto_destaque = $("#lojas").owlCarousel({
				items: 2, 
				itemsDesktop: [1200,2], 
				itemsDesktopSmall: [900,2], 
				itemsTablet: [600,2],
				itemsMobile: [500,1],
				lazyLoad: true
			});
		});
	</script>
</div>

<?php import_file(DIR_TEMPLATES."footer_website.php"); ?>