<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title></title>

<style type="text/css">

body {
	background: #CCCC99;
	font-family: arial;
	background-image: url("http://newton.ncc.edu/gansonj/ite254/img/money_bkg.jpg");
}

#pagewrap {
	width: 900px;
	margin: 40px auto 0px auto;
}

#header {
	text-align: center;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.45em;
	background: darkgreen;
	padding: 20px 0px 20px 0px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

#content {
	background: #FFFFFF;
	border: 6px lightgreen solid;
	padding: 30px;
	height: 550px;
	background-image: url("http://newton.ncc.edu/gansonj/ite254/img/money.gif");
	background-repeat: no-repeat;
	background-position: 90% 40%;
}

.formtext {
	margin-top: 15px;
}

.fieldstyle {
	background: lightgray;
	width: 300px;
	font-size: 1.1em;
	padding: 5px;
	border: 2px black solid;
}

#footer {
	background: darkgreen;
	color: #FFFFFF;
	height: 80px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;

}


#guessbutton:hover {
	background: white;
	color: green;
	border: 4px lightgreen solid;
}

#goBack:hover {
	background: white;
	color: green;
	border: 4px lightgreen solid;
}

#totalWorked{
	color:red;

}
#inputInfo{
	color: green;
}
</style>

</head>
<body>

<div id="pagewrap">

	<div id="header">
		.:: Calculate Your Pay Rate ::.
	</div>

	<div id="content">
	
	<!-- Text area 
	for inputs for Name, Hours workded 
	and pay rate inputs.
	Submite button to calculate de payrate.
	-->
		<form method="get" action="calcpay.php">
		
		<!-- Employee name for inputs -->
			<div class="formtext"> Enter your name</div>
			<input type="text" class="fieldstyle" name="empname">
			
		<!-- Employee hours worked for inputs -->
			<div class="formtext"> Enter hours worked</div>
			<input type="text" class="fieldstyle" name="hours">
			
		<!-- Employee pay rate for inputs -->	
			<div class="formtext"> Enter pay rate</div>
			<input type="text" class="fieldstyle" name="payrate">
			
		<!-- Submit button for inputs -->
			<div style="margin-top:20px;">
			<input class="btn btn-danger" type="submit" value="Calculate Pay" id="guessbutton">
			</div>
			<div style="margin-top:20px;">
			<a class="btn btn-success" id="goBack"  href="../dashboard.html">Go Back</a>
			</div>
		
		<!-- END OF TEXTS INPUT -->
		</form>
		
		<!-- ****************************************************** -->
		<!-- php CODE starts after this comment: -->
		<!-- ****************************************************** -->

		<?php
		// This code is used to process the form data
		// We only want this code to run AFTER button click
		// NOT on initial page load
		
if( isset( $_GET['empname'] ) &&
			isset( $_GET['hours'] ) &&
			isset( $_GET['payrate'] ) ) {
				
				$empname = $_GET['empname'];
				$hours = $_GET['hours'];
				$payrate = $_GET['payrate'];
				
				$total = $_GET['hours'] * $_GET['payrate'];
				
			echo "<div id='inputInfo'><h5>Your name is: " . $_GET['empname'] .".</h5></div>";
			echo "<div id='inputInfo'><h5>Hours worked is: " . $_GET['hours'] ." hours.</h5></div>";
			echo "<div id='inputInfo'><h5>Payrate is: " . $_GET['payrate'] ." per hour.</h5></div>";
			echo "<div id='totalWorked'><h3>Total pay is: $" . $total ." </h3></div>";
			}
		?>

	</div>
	
	<div id="footer">
	</div>

</div>

</body>
</html>



