<?php if (Session::get("tipo_usuario") != "6"){ show_403();} ?>
<?php import_file(DIR_TEMPLATES."header.php", ["title" => "Cadastrar Produto", "active_page" => "produtos"]); ?>
<?php import_file(DIR_MODELS."Model.class.php"); ?>

<h4 class="mb-3">
	<i class="fa-regular fa-plus"></i> Cadastrar Produto
</h4>

<?php 

	$dafault_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAAH0CAYAAADfWf7fAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAmoSURBVHhe7dbBCcAwEMCwa/ZftFDoCMknUxjp4xX8vN+/BwAAotYtAAAkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAaYYXAIA0wwsAQJrhBQAgzfACAJBmeAEASDO8AACkGV4AANIMLwAAYTMHtVoHqxxOZ5IAAAAASUVORK5CYII=";

?>

<div class="content-box">
	<form action="<?php echo show_link("/cadastrar-produto/"); ?>" method="post" enctype="multipart/form-data">
		<div class="form-row align-items-center">
			<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="nome-produto">Nome<span class="text-danger">*</span></label>
					<input type="text" name="nome_produto" id="nome-produto" class="form-control" required>
				</div>
			</div>

			<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="valor-produto">Valor<span class="text-danger">*</span></label>
					<div class="input-group">
						<div class="input-group-prepend">
							<div class="input-group-text">
								<i class="fa-regular fa-dollar-sign"></i>
							</div>
						</div>
						<input type="text" name="valor_produto" id="valor-produto" class="form-control" required>
					</div>
				</div>
			</div>

			<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="desc-empresa-produto">Desconto para Empresa<span class="text-danger">*</span></label>
					<div class="input-group">
						<div class="input-group-prepend">
							<div class="input-group-text">
								<i class="fa-regular fa-percent"></i>
							</div>
						</div>
						<input type="number" name="desc_empresa_produto" id="desc-empresa-produto" class="form-control" min="0" max="100" step="0.01" required>
					</div>
				</div>
			</div>

			<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="quantidade-produto">Quantidade<span class="text-danger">*</span></label>
					<input type="number" name="quantidade_produto" id="quantidade-produto" class="form-control" min="1" step="1" required>
				</div>
			</div>

			<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="categoria-produto">Categoria<span class="text-danger">*</span></label>
					<select name="id_categoria" id="categoria-produto" class="form-control" required>
						<option value="">Selecione um...</option>
						<?php

							$model = new Model();

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

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

						?>
							<option value="<?php echo $i->id_categoria; ?>"><?php echo $i->nome_categoria; ?></option>
						<?php endforeach; ?>
					</select>
				</div>
			</div>

			<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="subcategoria-produto">Subcategoria<span class="text-danger">*</span></label>
					<select name="id_subcategoria" id="subcategoria-produto" class="form-control" required>
						<option value="">Selecione um...</option>
					</select>
				</div>
			</div>
		</div>

		<div class="text-right">
			<button type="button" id="btn-adicionar-imagem" class="btn btn-success">
				<i class="fa-regular fa-plus"></i> Adicionar Imagem
			</button>
		</div>

		<div class="form-row align-items-center mb-3">
			<div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 text-center text-md-left">
				<img src="<?php echo $dafault_image; ?>" id="imagem-escolhida" class="img-fluid img-thumbnail my-2">
			</div>
			<div class="col-xl-9 col-lg-9 col-md-8 col-sm-12">
				<div class="form-group">
					<label for="imagem-anuncio">Imagem<span class="text-danger">*</span></label>
					<div class="input-group mb-3">
						<input type="text" id="diretorio-imagem" class="form-control" readonly required>
						<div class="input-group-append">
							<button type="button" id="btn-procurar" class="btn btn-secondary">
								<i class="fa-regular fa-folder-open"></i> Procurar
							</button>
						</div>
					</div>
					<input type="file" name="imagem_produto[]" id="imagem-produto" class="d-none" accept="image/*" required>
				</div>
			</div>
		</div>

		<div id="imagens-adicionais"></div>

		<div class="form-group">
			<label for="descricao-produto">Descrição</label>
			<textarea name="descricao_produto" id="descricao-produto" rows="8" class="form-control"></textarea>
		</div>

		<div class="form-group">
			<label for="observacao-produto">Observação</label>
			<textarea name="observacao_produto" id="observacao-produto" rows="8" class="form-control"></textarea>
		</div>

		<button type="submit" class="btn btn-primary">
			<i class="fa-regular fa-save"></i> Salvar
		</button>

		<a href="<?php echo show_link("/produtos/"); ?>" class="btn btn-secondary">
			<i class="fa-regular fa-arrow-left"></i> Voltar
		</a>
	</form>
</div>

<script>
	$("#valor-produto").mask("#.##0,00", {reverse: true});

	$("#categoria-produto").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-produto").append(html);
				}
			}, function(error){
				console.log("Erro: "+error);
			});
		}
	});

	window.descricao_produto = CKEDITOR.replace("descricao-produto");
	window.observacao_produto = CKEDITOR.replace("observacao-produto");
	
	var count = 0;

	$("#btn-adicionar-imagem").click(function(){
		var html = `
			<div id="imagem-`+count+`" class="form-row align-items-center mb-3">
				<div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 text-center text-md-left">
					<img src="<?php echo $dafault_image; ?>" id="imagem-escolhida-`+count+`" class="img-fluid img-thumbnail my-2">
				</div>
				<div class="col-xl-9 col-lg-9 col-md-8 col-sm-12">
					<div class="form-row align-items-end">
						<div class="col">
							<div class="form-group">
								<label for="imagem-anuncio-`+count+`">Imagem<span class="text-danger">*</span></label>
								<div class="input-group mb-3">
									<input type="text" id="diretorio-imagem-`+count+`" class="form-control" readonly required>
									<div class="input-group-append">
										<button type="button" id="btn-procurar-`+count+`" class="btn btn-secondary" onclick="procurarImagem(`+count+`)"><i class="fa-regular fa-folder-open"></i> Procurar</button>
									</div>
								</div>
								<input type="file" name="imagem_produto[]" id="imagem-produto-`+count+`" class="d-none" accept="image/*" required>
							</div>
						</div>
						<div class="col-auto text-right">
							<button type="button" class="btn btn-danger btn-square mb-3" onclick="removerImagem(`+count+`)" data-toggle="tooltip" data-placement="bottom" title="Remover">
								<i class="fa-regular fa-trash-alt"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
		`;

		$("#imagens-adicionais").append(html);

		$("[data-toggle='tooltip']").tooltip();

		count++;
	});

	function procurarImagem(n){
		$("#imagem-produto-"+n).click();

		$("#imagem-produto-"+n).change(function(){
			$("#diretorio-imagem-"+n).val($(this).prop("files")[0].name);
			imagePreview($(this), $("#imagem-escolhida-"+n));
			$("#imagem-produto-"+n).attr("required", true);
		});
	}

	function removerImagem(n){
		$("[data-toggle='tooltip']").tooltip("hide");
		$("#imagem-"+n).remove();
	}

	$("#btn-procurar").click(function(){
		$("#imagem-produto").click();

		$("#imagem-produto").change(function(){
			$("#diretorio-imagem").val($(this).prop("files")[0].name);
			imagePreview($(this), $("#imagem-escolhida"));
			$("#imagem-produto").attr("required", true);
		});
	});
</script>

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