<?php

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

	$model = new Model();

?>

<div id="filter-sidebar">
	<div id="content-filter-sidebar">
		<form action="" method="get">
			<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_loja
							ORDER BY 
								nome_categoria_loja ASC
						");

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

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

			<div id="subcategorias-box">
				<?php for ($i = 0; $i < count($id_subcategoria_loja); $i++): ?>
					<div class="subcategorias-childs">
						<div class="form-group">
							<label for="<?php echo "subcategoria-".$i; ?>">Subcategoria</label>
							<select name="subcategoria[]" id="<?php echo "subcategoria-".$i; ?>" class="form-control" onchange="obterSubcategoriasLojas(this)" data-number="<?php echo $i; ?>">
								<option value="">Todas</option>

								<?php 

									$subcategorias = $model->query("
										SELECT * FROM subcategoria_loja a
										WHERE 
											a.id_categoria_loja = (
												SELECT 
													x.id_categoria_loja
												FROM subcategoria_loja x
												WHERE 
													x.id_subcategoria_loja = :id
											) OR 
											a.id_subcategoria_loja_pai = (
												SELECT 
													y.id_subcategoria_loja_pai
												FROM subcategoria_loja y
												WHERE 
													y.id_subcategoria_loja = :id
											) 
										ORDER BY 
											a.nome_subcategoria_loja ASC
									", [
										":id" => $id_subcategoria_loja[$i]
									]);

									foreach ($subcategorias->fetchAll() as $j) {
										echo '<option value="'.$j->id_subcategoria_loja.'">'.$j->nome_subcategoria_loja.'</option>';
									}

								?>
							</select>
							<script>
								$(function(){
									$("<?php echo "#subcategoria-".$i; ?>").val("<?php echo $id_subcategoria_loja[$i]; ?>");
								});
							</script>
						</div>
					</div>
				<?php endfor; ?>
			</div>

			<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>

			<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>

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

			<a href="<?php echo show_link(""); ?>" class="btn btn-secondary btn-block">
				<i class="fa-regular fa-eraser"></i> Limpar
			</a>
		</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);
			});
		}
	});

	var count = <?php echo count($id_subcategoria_loja); ?>;

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

		$(".subcategorias-childs").remove();

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

				if (result.status == true) {
					$("#subcategorias-box").append(`
						<div class="subcategorias-childs">
							<div class="form-group">
								<label for="subcategoria-${count}">Subcategoria</label>
								<select name="subcategoria[]" id="subcategoria-${count}" class="form-control" onchange="obterSubcategoriasLojas(this)" data-number="${count}">
									<option value="">Todas</option>
								</select>
							</div>
						</div>
					`);

					var html = "";

					$.each(result.dados, function(i, data){
						html += '<option value="'+data.id_subcategoria_loja+'">'+data.nome_subcategoria_loja+'</option>';
					});

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

	function obterSubcategoriasLojas(object){
		var id_subcategoria_loja = $(object).val();
		var number = Number($(object).data("number"));

		for (let i = (number+1); i < count; i++) {
			$("#subcategoria-"+i).parent().parent().remove();
		}

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

				if (result.status == true) {
					$("#subcategorias-box").append(`
						<div class="subcategorias-childs">
							<div class="form-group">
								<label for="subcategoria-${count}">Subcategoria</label>
								<select name="subcategoria[]" id="subcategoria-${count}" class="form-control" onchange="obterSubcategoriasLojas(this)" data-number="${count}">
									<option value="">Todas</option>
								</select>
							</div>
						</div>
					`);

					var html = "";

					$.each(result.dados, function(i, data){
						html += '<option value="'+data.id_subcategoria_loja+'">'+data.nome_subcategoria_loja+'</option>';
					});

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