<div class="bkg"></div>
<div class="container" id="tipForm">
	<h1>Tip Calculator</h1>
	<section>
		<p>Amount:</p>
		<input name="amount" type="text" id="billInput" placeholder="What was the total?">
	</section>
	<div id="results">
		<section>
			<p class="select-tip">Select Tip:
				<span id="tipPercent">
					<i class="fa fa-smile-o" aria-hidden="true"></i>
					18%</span>
			</p>
			<input type="range" min="15" max="30" value="18" class="slider" id="tipInput">
		</section>

		<section>
			<div>
				<p>Tip:</p>
				<div class="number" id="tipAmount"></div>
			</div>
			<div>
				<p>Total:</p>
				<div class="number number-total" id="newBillTotal"></div>
			</div>
		</section>

		<section>
			<p>Split: <span id="split">1 person</span></p>
			<input type="range" min="1" max="24" class="slider" value="1" id="splitInput">
		</section>

		<section id="splitResults">
			<div>
				<p>Amount / Person:</p>
				<div class="number" id="amountPerPerson"></div>
			</div>
			<div>
				<p>Tip / Person:</p>
				<div class="number" id="tipPerPerson"></div>
			</div>
		</section>
	</div>
</div>

$raisin-black: #2e2e3a;
$gray: #bbb8b2;
$purple: #7b287d;
$teal: #0fb9b1;
$gold: #ffa801;

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

body {
	font-family: "Poppins";
}

.bkg {
	height: 100vh;
	width: 100%;
	background: linear-gradient(rgba(#7b287d, 0.8), rgba(#7b287d, 0.8)),
		url(https://images.unsplash.com/photo-1559329007-40df8a9345d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80)
			no-repeat center;
	background-size: cover;
	position: absolute;
	top: 0;
}

.container {
	padding: 60px;
	background-color: #fff;
	margin: 5% auto;
	max-width: 500px;
	border-radius: 20px;
	box-shadow: 0 8px 20px rgba($raisin-black, 0.3);
	display: block;
	position: relative;
	z-index: 999;
}

h1 {
	margin-top: 0;
	margin-bottom: 1rem;
	display: inline-block;
	color: $raisin-black;
}

#results {
	display: none;
}

#results section {
	margin: 1.5rem 0;

	&:last-child,
	&:nth-child(2) {
		display: flex;
		justify-content: space-between;
		& div {
			width: 50%;
		}
	}
	&#splitResults {
		display: none;
	}
}

p {
	margin-bottom: 10px;
	// color: #7b287d;
	font-size: 14px;
}

sup {
	top: -0.35em;
	font-size: 65%;
}

.number,
#tipInput {
	font-size: 2.5rem;
	letter-spacing: 1px;
	font-weight: 300;
	color: $raisin-black;
}

.select-tip {
	display: flex;
	justify-content: space-between;
	align-items: center;
	& #tipPercent {
		align-items: center;
		background-color: $teal;
		padding: 6px 14px;
		border-radius: 20px;
		color: #fff;
		font-size: 1.35rem;
		font-weight: 500;
	}
}

input {
	width: 100%;
	&#billInput {
		padding: 14px 20px;
		border: 1px solid #7b287d;
		border-radius: 40px;
		color: $raisin-black;
		font-size: 1.25rem;
		&::placeholder {
			color: #b9b9b9;
			font-weight: 300;
		}
		&:focus {
			outline: none;
		}
	}
	&.slider {
		appearance: none;
		height: 2px;
		background: linear-gradient(to right, #7b287d, #2bcbba 60%);
		margin: 20px 0;
		&:focus {
			outline: none;
		}
		&::-webkit-slider-thumb {
			appearance: none;
			width: 24px;
			height: 40px;
			background: #7b287d;
			border-radius: 24px;
			border: 4px solid #fff;
		}
	}
}

document.getElementById("tipForm").onchange = function calculateTip() {
	document.getElementById("results").style.display = "block";
	// Selectors here
	const bill = Number(
		document.getElementById("billInput").value.replace("$", "")
	);
	const tip = document.getElementById("tipInput").value;
	const tipPercent = document.getElementById("tipPercent");
	const tipAmount = document.getElementById("tipAmount");
	const newBillTotal = document.getElementById("newBillTotal");
	const splitInput = Number(document.getElementById("splitInput").value);
	const amountPerPerson = document.getElementById("amountPerPerson");
	const tipPerPerson = document.getElementById("tipPerPerson");

	// Calculate tip
	let tipValue = bill * (tip / 100);
	tipAmount.innerHTML = `<sup>$</sup>${tipValue.toFixed(2)}`;
	newBillTotal.innerHTML = `<sup>$</sup>${(bill + tipValue).toFixed(2)}`;
	tipPercent.innerHTML = `
		<i class="fa fa-${
			tip < 18
				? "frown"
				: tip >= 18 && tip <= 22
				? "smile"
				: tip > 22
				? "star"
				: ""
		}-o" aria-hidden="true"></i> ${tip}%`;
	tipPercent.style.backgroundColor =
		tip < 18
			? "#7b287d"
			: tip > 22
			? "#ffa801"
			: tip >= 18 && tip <= 22
			? "#0fb9b1"
			: "";

	// Split Bill
	if (splitInput > 1) {
		document.getElementById("splitResults").style.display = "flex";
	}
	document.getElementById("split").innerHTML = `${splitInput} ${
		splitInput > 1 ? "people" : "person"
	}`;
	amountPerPerson.innerHTML = `<sup>$</sup>${(
		(bill + tipValue) /
		splitInput
	).toFixed(2)}`;
	tipPerPerson.innerHTML = `<sup>$</sup>${(tipValue / splitInput).toFixed(2)}`;
};