<?php import_template("header", ["title" => "Home", "active_page" => "dashboard"]); ?>

<h3 class="mb-3">Exemplo</h3>

<div class="content-box">
	<button type="button" id="btn-popup" class="btn btn-primary">
		Pop-up
	</button>

	<br>

	<button type="button" class="jc-button jc-button-label jc-button-blue">
		<span class="jc-button-label-icon">
			<i class="fa-solid fa-plus"></i>
		</span>
		<span class="jc-button-label-text">
			Button
		</span>
	</button>

	<button type="button" class="jc-button jc-button-blue">
		Button
	</button>

	<button type="button" class="jc-button jc-button-green">
		Button
	</button>

	<button type="button" class="jc-button jc-button-red">
		Button
	</button>

	<button type="button" class="jc-button jc-button-yellow">
		Button
	</button>

	<button type="button" class="jc-button jc-button-cyan">
		Button
	</button>

	<button type="button" class="jc-button jc-button-purple">
		Button
	</button>

	<button type="button" class="jc-button jc-button-gray">
		Button
	</button>

	<button type="button" class="jc-button jc-button-white">
		Button
	</button>

	<button type="button" class="jc-button jc-button-black">
		Button
	</button>

	<br><br>

	<form id="form" action="" method="GET">
		<div class="mb-3">
			<label for="nome" class="form-label">Nome</label>
			<input type="text" name="nome" id="nome" class="form-control" value="João">
		</div>

		<div class="mb-3">
			<label for="sobrenome" class="form-label">Sobrenome</label>
			<input type="text" name="sobrenome" id="sobrenome" class="form-control" value="Silva">
		</div>

		<div class="mb-3">
			<label for="sexo" class="form-label">Sexo</label>
			<select name="sexo" id="sexo" class="form-select">
				<option value="">Selecione um...</option>
				<option value="Masculino" selected>Masculino</option>
				<option value="Feminino">Feminino</option>
			</select>
		</div>

		<div class="mb-3">
			<label for="descricao" class="form-label">Descrição</label>
			<textarea name="descricao" id="descricao" class="form-control">Muito Bom</textarea>
		</div>

		<div class="mb-3">
			<label for="cor" class="form-label">Cor</label>
			<input type="color" name="cor" id="cor" class="form-control form-control-color" value="#563d7c">
		</div>

		<div class="mb-3">
			<div class="form-check">
				<input type="checkbox" name="checkbox" id="checkbox-1" class="form-check-input" value="1">
				<label for="checkbox-1" class="form-check-label">
					Checkbox 1
				</label>
			</div>
			<div class="form-check">
				<input type="checkbox" name="checkbox" id="checkbox-2" class="form-check-input" value="2" checked>
				<label for="checkbox-2" class="form-check-label">
					Checkbox 2
				</label>
			</div>
		</div>

		<input type="hidden" name="id" id="id" value="123">

		<button type="submit" class="jc-button jc-button-blue">
			Enviar
		</button>
	</form>
</div>

<script>
	document.querySelector("#btn-popup").addEventListener("click", function(){
		modal({
			header: {
				text: "Título",
				closeButton: true
			},
			body: {
				html: `
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

									`
			},
			footer: {
				align: "right",
				buttons: [{
					text: "Fechar",
					close: true
				}]
			}
		});

		popup({
			title: "Aviso", 
			message: "Vou excluir tudo!", 
			html: `
				<form action="home_submit" method="get" accept-charset="utf-8">
					<div class="mb-0">
						<label for="texto" class="form-label">Texto</label>
						<input type="text" name="texto" id="texto" class="form-control">
					</div>
				</form>

				<p>Lorem ipsum dolor sit amet consectetur, adipisicing, elit. Aliquid laudantium sapiente reprehenderit doloribus dolores ipsa necessitatibus maxime animi delectus beatae in odit cum, fugiat corporis libero quas ullam, ad minima.</p>
				<p>Lorem ipsum dolor sit amet consectetur, adipisicing, elit. Aliquid laudantium sapiente reprehenderit doloribus dolores ipsa necessitatibus maxime animi delectus beatae in odit cum, fugiat corporis libero quas ullam, ad minima.</p>
				<p>Lorem ipsum dolor sit amet consectetur, adipisicing, elit. Aliquid laudantium sapiente reprehenderit doloribus dolores ipsa necessitatibus maxime animi delectus beatae in odit cum, fugiat corporis libero quas ullam, ad minima.</p>
			`,
			type: "warning"
		}).then(function(result){
			console.log(result);

			if (result.action == "confirmed") {
				toast({
					title: "Aviso",
					message: "Uma mensagem de teste!",
					type: "success",
					position: "top-right",
					inverse: true
				});
			}
			else{
				toast({
					title: "Aviso",
					message: "Uma mensagem de teste!",
					type: "error",
					position: "top-right",
					inverse: true
				});
			}

			result.close();

			popup({
				title: "Aviso", 
				message: "Você é o melhor!", 
				type: "info"
			}).then(function(result){
				console.log(result);

				ajax({
					method: "GET",
					url: "https://viacep.com.br/ws/69905524/json/",
					dataType: "json",
					data: {
						teste: 123
					},
					async: true
				}).then(function(response){
					console.log(response);
				}, function(error){
					console.log(error);
				});

				result.close();
			});
		}, function(error){
			console.log(error);
		});
	});

	document.querySelector(".jc-button").addEventListener("click", function(){
		loadingOverlay("show", {
			image: "assets/images/loading.svg",
		});

		loadingOverlay("hide", {
			delay: 5000
		});
	});

	ajaxStart(function(){
		loadingOverlay("show", {
			image: "assets/images/loading.svg",
		});
	});

	ajaxEnd(function(){
		loadingOverlay("hide", {
			delay: 1000
		});
	});
</script>

<?php import_template("footer"); ?>