<?php

	import_file(DIR_MODELS."Model.class.php");

	$model = new Model();

?>

<div id="filter-sidebar">
	<div id="content-filter-sidebar">
		<form action="" method="get">
			<?php if (isset($id_loja) and !empty($id_loja)): ?>
				<input type="hidden" name="loja" value="<?php echo encrypt_encode($id_loja); ?>">
			<?php endif; ?>

			<div class="form-group">
				<label for="pesquisa">Pesquisa</label>
				<input type="text" name="pesquisa" id="pesquisa" class="form-control" autocomplete="off" value="<?php echo $pesquisa; ?>">
			</div>

			<div class="form-group">
				<label for="categoria">Categoria</label>
				<select name="categoria" id="categoria" class="form-control">
					<option value="">Todas</option>

					<?php

						$categorias = $model->query("
							SELECT * FROM categoria 
							ORDER BY 
								nome_categoria ASC
						");

						foreach ($categorias->fetchAll() as $i):

					?>
						<option value="<?php echo $i->id_categoria; ?>"><?php echo $i->nome_categoria; ?></option>
					<?php endforeach; ?>
				</select>
				<script>
					$(function(){
						$("#categoria").val("<?php echo $id_categoria; ?>");
					});
				</script>
			</div>

			<div class="form-group">
				<label for="subcategoria">Subcategoria</label>
				<select name="subcategoria" id="subcategoria" class="form-control">
					<option value="">Todas</option>

					<?php 

						if (!empty($id_categoria) and is_numeric($id_categoria)) {
							$subcategorias = $model->query("
								SELECT * FROM subcategoria 
								WHERE 
									id_categoria = :id 
								ORDER BY 
									nome_subcategoria ASC
							", [
								":id" => $id_categoria
							]);

							foreach ($subcategorias->fetchAll() as $i) {
								echo '<option value="'.$i->id_subcategoria.'" class="option-subcategoria">'.$i->nome_subcategoria.'</option>';
							}
						}

					?>
				</select>
				<script>
					$(function(){
						$("#subcategoria").val("<?php echo $id_subcategoria; ?>");
					});
				</script>
			</div>

			<?php if (isset($id_estado)): ?>
				<div class="form-group">
					<label for="estado">Estado</label>
					<select name="estado" id="estado" class="form-control">
						<option value="">Todos</option>

						<?php

							$estados = $model->query("
								SELECT * FROM estado 
								ORDER BY 
									nome_estado ASC
							");

							foreach ($estados->fetchAll() as $i):

						?>
							<option value="<?php echo $i->id_estado; ?>"><?php echo $i->nome_estado; ?></option>
						<?php endforeach; ?>
					</select>
					<script>
						$(function(){
							$("#estado").val("<?php echo $id_estado; ?>");
						});
					</script>
				</div>
			<?php endif; ?>

			<?php if (isset($id_cidade)): ?>
				<div class="form-group">
					<label for="cidade">Cidade</label>
					<select name="cidade" id="cidade" class="form-control">
						<option value="">Todas</option>

						<?php 

							if (!empty($id_estado) and is_numeric($id_estado)) {
								$cidades = $model->query("
									SELECT * FROM cidade 
									WHERE 
										id_estado = :id 
									ORDER BY 
										nome_cidade ASC
								", [
									":id" => $id_estado
								]);

								foreach ($cidades->fetchAll() as $i) {
									echo '<option value="'.$i->id_cidade.'" class="option-cidade">'.$i->nome_cidade.'</option>';
								}
							}

						?>
						<script>
							$(function(){
								$("#cidade").val("<?php echo $id_cidade; ?>");
							});
						</script>
					</select>
				</div>
			<?php endif; ?>

			<button class="btn btn-primary btn-block">
				<i class="fa-regular fa-search"></i> Pesquisar
			</button>

			<?php if (isset($id_loja) and !empty($id_loja)): ?>
				<a href="<?php echo show_link("/visualizar-todos-produtos-loja/?loja=".urlencode(encrypt_encode($id_loja))); ?>" class="btn btn-secondary btn-block">
					<i class="fa-regular fa-eraser"></i> Limpar
				</a>
			<?php else: ?>
				<a href="<?php echo show_link(""); ?>" class="btn btn-secondary btn-block">
					<i class="fa-regular fa-eraser"></i> Limpar
				</a>
			<?php endif; ?>
		</form>
	</div>
	<div id="btn-action-filter-sidebar" class="text-primary">
		<i class="icon icon-filter"></i>
	</div>
	<div id="body-content"></div>
</div>

<script>
	$("#estado").change(function(){
		var id = $(this).val();

		$(".option-cidade").remove();

		if ($(this).val() != "") {
			$.ajax({
				type: "POST",
				data: {id_estado: id},
				url: "<?php echo show_link("/obter-cidades/"); ?>",
				async: true
			}).then(function(response){
				var result = $.parseJSON(response);

				if (result.status == true) {
					var html = "";

					$.each(result.dados, function(i, data){
						html += '<option value="'+data.id_cidade+'" class="option-cidade">'+data.nome_cidade+'</option>';
						console.log(data);
					});

					$("#cidade").append(html);
				}
			}, function(error){
				console.log("Erro: "+error);
			});
		}
	});

	$("#categoria").change(function(){
		var id_categoria = $(this).val();

		$(".option-subcategoria").remove();

		if ($(this).val() != "") {
			$.ajax({
				type: "POST",
				data: {id_categoria: id_categoria},
				url: "<?php echo show_link("/obter-subcategorias/"); ?>",
				async: true
			}).then(function(response){
				var result = $.parseJSON(response);

				if (result.status == true) {
					var html = "";

					$.each(result.dados, function(i, data){
						html += '<option value="'+data.id_subcategoria+'" class="option-subcategoria">'+data.nome_subcategoria+'</option>';
						console.log(data);
					});

					$("#subcategoria").append(html);
				}
			}, function(error){
				console.log("Erro: "+error);
			});
		}
	});
</script>