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

<?php 

	$model = new Model();

	$result = $model->query("
		SELECT * FROM usuario 
		WHERE 
			id_usuario = :id AND 
			usuario_ativo = 'S'
	", [
		":id" => Session::get("id_usuario")
	]);

	if ($result->rowCount() == 0) {
		show_403();
	}

	$dados = $result->fetch();

?>


<h4 class="mb-3">
	<i class="fa-regular fa-address-card"></i> Meu Perfil
</h4>

<div class="content-box">
	<form id="form-editar-perfil">
		<h5 class="mb-3">Dados Pessoais</h5>
		
		<div class="form-row">
			<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="nome-usuario">Nome<span class="text-danger d-none">*</span></label>
					<input type="text" name="nome_usuario" id="nome-usuario" class="form-control" maxlength="120" value="<?php echo $dados->nome_usuario; ?>" disabled required>
				</div>
			</div>
			<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="data-nascimento-usuario">Data Nascimento<span class="text-danger d-none">*</span></label>
					<input type="text" name="data_nascimento_usuario" id="data-nascimento-usuario" class="form-control" value="<?php echo convert_date($dados->data_nascimento_usuario); ?>" disabled required>
				</div>
			</div>
			<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="sexo-usuario">Sexo<span class="text-danger d-none">*</span></label>
					<select name="sexo_usuario" id="sexo-usuario" class="form-control" disabled required>
						<option value="">Selecione um...</option>
						<option value="M">Masculino</option>
						<option value="F">Feminino</option>
					</select>

					<script>
						$(function(){
							$("#sexo-usuario").val("<?php echo $dados->sexo_usuario; ?>");
						});
					</script>
				</div>
			</div>
		</div>

		<div class="form-row">
			<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="cpf-usuario">CPF/CNPJ</label>
					<input type="text" id="cpf-usuario" class="form-control" value="<?php echo $dados->cpf_usuario; ?>" disabled required>
				</div>
			</div>
			<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
				<div class="form-group">
					<label for="telefone-usuario">Telefone<span class="text-danger d-none">*</span></label>
					<input type="text" name="telefone_usuario" id="telefone-usuario" class="form-control" value="<?php echo $dados->telefone_usuario; ?>" disabled required>
				</div>
			</div>
		</div>

		<?php if (Session::get("tipo_usuario") == "1" or Session::get("tipo_usuario") == "2" or Session::get("tipo_usuario") == "6"): ?>
			<hr>

			<h5 class="mb-3">Dados Residênciais</h5>

			<div class="form-row">
				<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
					<div class="form-group">
						<label for="cep-usuario">CEP<span class="text-danger d-none">*</span></label>
						<input type="text" name="cep_usuario" id="cep-usuario" class="form-control" value="<?php echo $dados->cep_usuario; ?>" disabled required>
					</div>
				</div>
			</div>

			<div class="form-row">
				<div class="col-xl-5 col-lg-5 col-md-4 col-sm-12">
					<div class="form-group">
						<label for="rua-usuario">Rua<span class="text-danger d-none">*</span></label>
						<input type="text" name="rua_usuario" id="rua-usuario" class="form-control" value="<?php echo $dados->rua_usuario; ?>" maxlength="120" disabled required>
					</div>
				</div>
				<div class="col-xl-5 col-lg-5 col-md-4 col-sm-12">
					<div class="form-group">
						<label for="bairro-usuario">Bairro<span class="text-danger d-none">*</span></label>
						<input type="text" name="bairro_usuario" id="bairro-usuario" class="form-control" value="<?php echo $dados->bairro_usuario; ?>" maxlength="120" disabled required>
					</div>
				</div>
				<div class="col-xl-2 col-lg-2 col-md-4 col-sm-12">
					<div class="form-group">
						<label for="numero-casa-usuario">Número<span class="text-danger d-none">*</span></label>
						<input type="number" name="numero_casa_usuario" id="numero-casa-usuario" class="form-control" value="<?php echo $dados->numero_casa_usuario; ?>" min="1" max="99999999" step="1" disabled required>
					</div>
				</div>
			</div>
		
			<div class="form-group">
				<label for="complemento-usuario">Complemento</label>
				<input type="text" name="complemento_usuario" id="complemento-usuario" class="form-control" value="<?php echo $dados->complemento_usuario; ?>" maxlength="255" disabled>
			</div>
		
			<div class="form-row">
				<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
					<div class="form-group">
						<label for="id-estado">Estado<span class="text-danger d-none">*</span></label>
						<select name="id_estado" id="id-estado" class="form-control" disabled required>
							<option value="">Selecione um...</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(){
								$("#id-estado").val("<?php echo $dados->id_estado; ?>");
							});
						</script>
					</div>
				</div>

				<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
					<div class="form-group">
						<label for="id-cidade">Cidade<span class="text-danger d-none">*</span></label>
						<select name="id_cidade" id="id-cidade" class="form-control" disabled required>
							<option value="">Selecione um...</option>

							<?php 

								$cidades = $model->query("SELECT * FROM cidade WHERE id_estado = '$dados->id_estado' ORDER BY nome_cidade ASC");

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

							?>
								<option value="<?php echo $i->id_cidade; ?>" class="option-cidade"><?php echo $i->nome_cidade; ?></option>
							<?php endforeach; ?>
						</select>
						<script>
							$(function(){
								$("#id-cidade").val("<?php echo $dados->id_cidade; ?>");
							});
						</script>
					</div>
				</div>
			</div>

			<hr>
			<h5 class="mb-3">Dados Bancários</h5>
	
			<div class="form-row">
				<div class="col-md-6">
					<div class="form-group">
						<label for="banco-usuario">Banco<span class="text-danger d-none">*</span></label>
						<select name="id_banco" id="banco-usuario" class="form-control" disabled required>
							<option value="">Selecione um...</option>
							<?php 

								$bancos = $model->query("SELECT * FROM banco WHERE status_banco = 'S' ORDER BY codigo_banco ASC");

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

							?>
								<option value="<?php echo encrypt_encode($i->id_banco); ?>"><?php echo $i->codigo_banco." - ".$i->nome_banco; ?></option>
							<?php endforeach; ?>
						</select>

						<script>
							$(function(){
								$("#banco-usuario").val("<?php echo encrypt_encode($dados->id_banco); ?>");
							});
						</script>
					</div>
				</div>

				<div class="col-md-6">
					<div class="form-group">
						<label for="numero-agencia-usuario">Agência<span class="text-danger d-none">*</span></label>
						<input type="text" name="numero_agencia_usuario" id="numero-agencia-usuario" class="form-control" value="<?php echo $dados->numero_agencia_usuario; ?>" maxlength="25" disabled required>
					</div>
				</div>

				<div class="col-md-6">
					<div class="form-group">
						<label for="numero-conta-usuario">Conta<span class="text-danger d-none">*</span></label>
						<input type="text" name="numero_conta_usuario" id="numero-conta-usuario" class="form-control" value="<?php echo $dados->numero_conta_usuario; ?>" maxlength="60" disabled required>
					</div>
				</div>

				<div class="col-md-6">
					<div class="form-group">
						<label for="chave-pix-usuario">Chave PIX<span class="text-danger d-none">*</span></label>
						<input type="text" name="chave_pix_usuario" id="chave-pix-usuario" class="form-control" value="<?php echo $dados->chave_pix_usuario; ?>" maxlength="255" disabled required>
					</div>
				</div>
			</div>
		<?php endif; ?>

		<hr>
		<h5 class="mb-3">Dados de Acesso</h5>

		<div class="form-group">
			<label for="email-usuario">E-mail</label>
			<input type="email" id="email-usuario" class="form-control" maxlength="255" value="<?php echo $dados->email_usuario; ?>" disabled required>
		</div>

		<div id="group-senha" class="form-group d-none">
			<div class="alert alert-info my-3">
				<strong><i class="fa-regular fa-info-circle"></i> Aviso:</strong> Preencha o campo Senha apenas se for querer alterar a sua senha de acesso do sistema.
			</div>
			<label for="senha-usuario">Senha</label>
			<div class="input-group">
				<input type="password" name="senha_usuario" id="senha-usuario" class="form-control" minlength="6" maxlength="32" disabled>
				<div class="input-group-append">
					<button type="button" id="btn-senha" class="btn btn-white">
						<i class="fa-regular fa-eye-slash"></i>
					</button>
				</div>
			</div>
		</div>

		<div id="btns" class="d-none">
			<button type="submit" class="btn btn-primary">
				<i class="fa-regular fa-save"></i> Salvar
			</button>

			<button type="button" id="btn-cancelar" class="btn btn-secondary">
				<i class="fa-regular fa-times"></i> Cancelar
			</button>
		</div>

		<button type="button" id="btn-editar" class="btn btn-primary">
			<i class="fa-regular fa-pencil-alt"></i> Editar
		</button>
	</form>
</div>

<script>
	$("#data-nascimento-usuario").mask("00/00/0000");
	$("#telefone-usuario").mask("(00) 00000-0000");
	$("#cep-usuario").mask("00000-000");

	$("#btn-editar").click(function(){
		$(this).addClass("d-none");
		$("#btns").removeClass("d-none");
		$("#group-senha").removeClass("d-none");
		$("#info").removeClass("d-none");
		$("span.text-danger").removeClass("d-none");
		$(".form-control").attr("disabled", false);
		$("#email-usuario, #cpf-usuario").attr("disabled", true);
	});

	$("#btn-cancelar").click(function(){
		$("#btn-editar").removeClass("d-none");
		$("#btns").addClass("d-none");
		$("#group-senha").addClass("d-none");
		$("#info").addClass("d-none");
		$("span.text-danger").addClass("d-none");
		$(".form-control").attr("disabled", true);
	});

	$("#id-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);
					});

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

	$("#btn-senha").click(function(){
		if ($("#senha-usuario").attr("type") == "password") {
			$("#senha-usuario").attr("type", "text");
			$(this).html('<i class="fa-regular fa-eye"></i>');
		}
		else{
			$("#senha-usuario").attr("type", "password");
			$(this).html('<i class="fa-regular fa-eye-slash"></i>');
		}
	});

	$("#cep-usuario").keyup(function(){
		if ($(this).val().length == 9) {
			var cep = $(this);

			$.ajax({
				type: "GET",
				url: "https://viacep.com.br/ws/"+(cep.val())+"/json/",
				async: true
			}).then(function(response){
				if (response.erro == true) {
					cep.val("");
					cep.addClass("is-warning");

					$.toast({
						heading: "Aviso",
						text: "CEP Inválido!",
						icon: "warning",
						loader: true
					});

					cep.keyup(function(){
						$(this).removeClass("is-warning");
						$(this).off("keyup");
					});

					$("#rua-usuario").val("");
					$("#bairro-usuario").val("");
				}
				else{
					$("#rua-usuario").val(response.logradouro);
					$("#bairro-usuario").val(response.bairro);
				}
			},function(error){
				console.log("Erro: "+error);
			});
		}
	});

	$("#cep-usuario").change(function(){
		if ($(this).val().length != 9) {
			$(this).val("");
		}
	});

	$("#form-editar-perfil").submit(function(event){
		event.preventDefault();
		var form = $(this);
		$.ajax({
			type: "POST",
			data: form.serialize(),
			url: "<?php echo show_link("/editar-perfil/"); ?>",
			async: true
		}).then(function(response){
			var result = $.parseJSON(response);
			if (result.status == true) {
				$.toast({
					heading: "Aviso",
					text: "Dados Atualizado com Sucesso!",
					icon: "success",
					loader: true
				});

				$("#btn-editar").removeClass("d-none");
				$("#btns").addClass("d-none");
				$("#group-senha").addClass("d-none");
				$("#info").addClass("d-none");
				$("span.text-danger").addClass("d-none");
				$(".form-control").attr("disabled", true);
				$("senha-usuario").val("");
			}
			else if (result.status == false && result.motivo == "data_false") {
				$("#data-nascimento-usuario").addClass("is-warning");
				$.toast({
					heading: "Aviso",
					text: "Data de Nascimento Inválida!",
					icon: "warning",
					loader: true
				});
				$("#data-nascimento-usuario").keyup(function(){
					$(this).removeClass("is-warning");
					$(this).off("keyup");
				});
			}
			else{
				$.toast({
					heading: "Aviso",
					text: "Erro ao Atualizar os Dados!",
					icon: "error",
					loader: true
				});
			}
		}, function(error){
			console.log("Erro: "+error);
		});
	});
</script>

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