<?php
if(isset($_GET['select'])&&isset($_GET['zip'])){
	$select = $_GET['select'];
	$pri = "price".$select;
	$siz = "size".$select;
	$zip = $_GET['zip'];
}
else{
	header("Location:order.php");
	exit;
}
$con = mysqli_connect("localhost","netvatise_btdt_postal_search","dge@$23f35!@","netvatise_btdt_postal_search");	
	
if ($con->connect_error) {
    die("Connection failed: " . $con->connect_error);
} 

$sql = "SELECT DISTINCT * FROM postalsearch2 p,price pr, dumpster d WHERE postal= '".$zip."' AND p.group_id=d.group_id AND d.price_id=pr.price_id";


$result = $con->query($sql);

$count = mysql_num_rows($sql);

if($row=$result->fetch_assoc()){
	$price = $row[$pri];
	$size = $row[$siz];
	if($price==""||$size==""){
		header("Location:order.php");	
	}
}else{
	header("Location:order.php");
	
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Bin There Dump That Toronto</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
	<!-- For the form of payment -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
	<!-- Magnific Popup core CSS file -->
	<link rel="stylesheet" href="css/popup/magnific-popup.css">


    <style>

    .aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.aligner-item {
  max-width: 50%;
  z-index: 50;
}
.chevy{position:absolute;right:10px;top:45%}
        .righttab{    
          background: green;
    -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
    transition: width 0.5s;
width:30px;
height:100%;
position:absolute;
right:-2px;
margin-right:1rem;
  }
/* Required for full background image */

.righttab:hover {
    width: 100%;
    height: 100%;

}
.faded{height:100%;width:100%;}
.hero {
  height: 800px;
}


        .wow {
            visibility: hidden;
        }

.navbar.navbar-dark .breadcrumb .nav-item.active>.nav-link, .navbar.navbar-dark .navbar-nav .nav-item.active>.nav-link{background-color:#9fcf67;color:#000;}
.flinks{float:left;padding-right:20px;}

.rgba-gradient {
  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(72, 15, 144, 0.5) 100%);
  background: -webkit-gradient(linear, 45deg, from(rgba(0, 0, 0, 0.8), rgba(72, 15, 144, 0.5) 100%)));
  background: linear-gradient(to 45deg, rgba(0, 0, 0, 0.8), rgba(72, 15, 144, 0.5) 100%);
}

.card {
  background-color: rgba(228, 228, 228, 0.6);
}

.md-form label {
  color: #ffffff;
}

h6 {
  line-height: 1.7;
}
        
        
                 /* Carousel*/
    .carousel,
    .carousel-item,
    .carousel-item.active {
      height: 100%;
    }
    .carousel-inner {
      height: 100%;
    }
    .carousel-item:nth-child(1) {
      background-image: url("img/bg.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .carousel-item:nth-child(2) {
      background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/30.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .carousel-item:nth-child(3) {
      background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img%20(10).jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }

.fixed-header {
  position: fixed;
  top:0; left:0;
  width: 100%; 
}
.headInfo{float:right;text-align:right}
@media (max-width: 500px){
.headInfo{float:none;text-align:center;display:block;width:100%;}
}
@media (max-width:767px){
 .hero {height:1200px;}
 .col {flex-basis:100%;margin-bottom:20px;}
 .flex-center{display:block;}
 .headerLogo{margin-left:21%}
}

body {
    transition: background-color .5s;
}
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Stay on top */
    top: 0; /* Stay at the top */
    right: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

.order-form{
	margin:30px auto;
	
}

.order-form-left, .order-form-right{

    border: 1px solid #D3D3D3;
    border-radius: 5px;
	padding:40px;

}
  </style>

<!-- SMS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- End SMS -->

        <!-- for the demo purpose, using CDN path -->
        <script src="https://code.jquery.com/jquery-1.11.1.js"> </script>
        <!-- Note: PayTrace uses jquery 1.11.1 so please use the same version if possible.Using different versions of jquery can cause some issues.
        in case of using different version of jQuery - refer this https://api.jquery.com/jquery.noconflict/-->
        
        <!-- This is the PayTrace End-to-End Encryption library: -->
        <script language="javascript" src="https://api.paytrace.com/assets/e2ee/paytrace-e2ee.js"></script>
       
        <!-- Code sample of submitting a valid form to the PayTrace Client Side Encryption Library. -->
        <script language="javascript">
          
                // set the key from an AJAX call  
                $(document).ready(function(){
                        paytrace.setKeyAjax('paytrace/public_key.pem') ;// set the key from an AJAX call (in this case via a relative URL)
                });
                
                $(document).ready( function(){
                    $("#DemoForm").submit(function(e){
                        //To prevent the default action of the submit
                        e.preventDefault();
                         
                        // Do your validation and if all validations are met, 
                        // Next is to submit the form with paytrace.submitEncrypted.
						if (!$("#wasteType").val()){
							alert("Please select the type of waste you have ");
						}

                        if ($("#ccNumber").val() && $("#ccCSC").val()) {
                           //if all validations are met, submit the form to Paytrace library for encyption.
                            paytrace.submitEncrypted("#DemoForm");
                        }
                        else{ 
                            alert("CCNumber and CSC number are required ! "); 
                        }
                    });
                });   
        </script>	
</head>

<body>

<!--Main Navigation -->
    
    <?php include('includes/_header.php'); ?>
 <div class="container">
 
  <div class="order-form">
        <form id="DemoForm" name="DemoForm" method="post" onsubmit="return checkForm();" action="paytrace/KeyedSaleJson.php"> 
                <!-- On each field to be encrypted at the browser, add the "form-control pt-encrypt" class. -->
				<h1 class="text-center">Order <?php echo $size." Yard Dumpster: $".$price;?> Base Price</h1><br />
<div class="row">
	<div class="order-form-left col-md-6 col-md-offset-6">

				<h2>Delivery Information</h2>
				<hr />

			<div class="form-group">
				<label for="wasteType">Select the type of waste you have*: </label> <p id="err"></p>
        		<select class="form-control" name="wasteType" id="wasteType">
            		<option selected disabled value="">----Please Select One----</option>
            		<option value="General Waste" bintype='domestic'>General Waste (light domestic &amp; commercial waste) - NOT for clean fill</option>
            		<option value="Clean Fill / Hard Fill" bintype='cleanfill'>Clean Fill / Hard Fill (soil, clay, concrete, brick, rock, tiles, etc) 4 yard bin only</option>
         		    <option value="Soil / Dirt" bintype='soil'>Soil / Dirt (100% pure soil / dirt only - no contaminants) 4 yard bin only</option>
          		  	<option value="Asbestos or Mold" bintype='mold'>Asbestos or Mold - Approved MOE Asbestos hauler please call for details</option>
         		    <option value="LEED Certified Bin" bintype='leed'>LEED Certified Waste Bin - Comes with a LEED Certificate for contractors</option>
          		</select>
			</div>
			
	<div class="form-group text-center">
		<a class="simple-ajax-popup-align-top" href="agreement.html" style="color:#000;font-weight:400;text-decoration:underline;">View Our Unacceptable Materials Agreement</a>
		<label for="agreement"><strong>I understand the Unacceptable Materials Agreement and agree to pay any charges that result from disposing of these materials.*</strong></label>
    	<input type="checkbox" required id="agreement" name="agreement" value="yes">
	</div>
	<div class="popup-agreement"></div>
			
			<div class="text-center">
			<label for="wasteType">Select Delivery Date*: </label>

			<span class="deliveryBtn" style="margin:0 auto;">
				<input type='text' id='deliveryDate' style='display:none;' name='deliveryDate' class='required' value='' />
			</span>
			</div>
			 <br />

				<div class="form-group">
					<label for="delivery_street_address">Delivery Address*:</label>
					<input type="text" required class="form-control" id="delivery_street_address" name="delivery_street_address" />
				</div>

				<div class="form-group">
					<label for="delivery_city">City*:</label>
					<input type="text" required class="form-control" id="delivery_city" name="delivery_city" />
				</div>

				<div class="form-group">
					<label for="province">State*:</label>
<select required class="form-control" id="delivery_province" name="delivery_province">
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="DC">District Of Columbia</option>
	<option value="FL">Florida</option>
	<option value="GA">Georgia</option>
	<option value="HI">Hawaii</option>
	<option value="ID">Idaho</option>
	<option value="IL">Illinois</option>
	<option value="IN">Indiana</option>
	<option value="IA">Iowa</option>
	<option value="KS">Kansas</option>
	<option value="KY">Kentucky</option>
	<option value="LA">Louisiana</option>
	<option value="ME">Maine</option>
	<option value="MD">Maryland</option>
	<option value="MA">Massachusetts</option>
	<option value="MI">Michigan</option>
	<option value="MN">Minnesota</option>
	<option value="MS">Mississippi</option>
	<option value="MO">Missouri</option>
	<option value="MT">Montana</option>
	<option value="NE">Nebraska</option>
	<option value="NV">Nevada</option>
	<option value="NH">New Hampshire</option>
	<option value="NJ">New Jersey</option>
	<option value="NM">New Mexico</option>
	<option value="NY">New York</option>
	<option value="NC">North Carolina</option>
	<option value="ND">North Dakota</option>
	<option value="OH">Ohio</option>
	<option value="OK">Oklahoma</option>
	<option value="OR">Oregon</option>
	<option value="PA">Pennsylvania</option>
	<option value="RI">Rhode Island</option>
	<option value="SC">South Carolina</option>
	<option value="SD">South Dakota</option>
	<option value="TN">Tennessee</option>
	<option value="TX">Texas</option>
	<option value="UT">Utah</option>
	<option value="VT">Vermont</option>
	<option value="VA">Virginia</option>
	<option value="WA">Washington</option>
	<option value="WV">West Virginia</option>
	<option value="WI">Wisconsin</option>
	<option value="WY">Wyoming</option>
</select>
				</div>

				<div class="form-group">
					<label for="delivery_postal">Zip Code: <h3><?php echo $zip; ?></h3></label>
					<input type="hidden" class="form-control" id="delivery_postal" name="delivery_postal" value="<?php echo $zip; ?>"/>
				</div>



				<div class="form-group">
				<h2>Customer Information</h2>
				<hr />
					<label for="name">Name*:</label>
					<input type="text" required class="form-control" id="name" name="name" />
				</div>
				<div class="form-group">
					<label for="email">Email*:</label>
					<input type="email" required class="form-control" id="email" name="email" />
				</div>

				<div class="form-group">
					<label for="phone">Phone Number*:</label>
					<input type="text" required class="form-control" id="phone" name="phone" />
				</div>
				
				<div class="form-group">
					<label for="street_address">Street Address*:</label>
					<input type="text" required class="form-control" id="street_address" name="street_address" />
				</div>

				<div class="form-group">
					<label for="city">City*:</label>
					<input type="text" required class="form-control" id="city" name="city" />
				</div>

				<div class="form-group">
					<label for="province">State*:</label>
<select required class="form-control" id="province" name="province">
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="DC">District Of Columbia</option>
	<option value="FL">Florida</option>
	<option value="GA">Georgia</option>
	<option value="HI">Hawaii</option>
	<option value="ID">Idaho</option>
	<option value="IL">Illinois</option>
	<option value="IN">Indiana</option>
	<option value="IA">Iowa</option>
	<option value="KS">Kansas</option>
	<option value="KY">Kentucky</option>
	<option value="LA">Louisiana</option>
	<option value="ME">Maine</option>
	<option value="MD">Maryland</option>
	<option value="MA">Massachusetts</option>
	<option value="MI">Michigan</option>
	<option value="MN">Minnesota</option>
	<option value="MS">Mississippi</option>
	<option value="MO">Missouri</option>
	<option value="MT">Montana</option>
	<option value="NE">Nebraska</option>
	<option value="NV">Nevada</option>
	<option value="NH">New Hampshire</option>
	<option value="NJ">New Jersey</option>
	<option value="NM">New Mexico</option>
	<option value="NY">New York</option>
	<option value="NC">North Carolina</option>
	<option value="ND">North Dakota</option>
	<option value="OH">Ohio</option>
	<option value="OK">Oklahoma</option>
	<option value="OR">Oregon</option>
	<option value="PA">Pennsylvania</option>
	<option value="RI">Rhode Island</option>
	<option value="SC">South Carolina</option>
	<option value="SD">South Dakota</option>
	<option value="TN">Tennessee</option>
	<option value="TX">Texas</option>
	<option value="UT">Utah</option>
	<option value="VT">Vermont</option>
	<option value="VA">Virginia</option>
	<option value="WA">Washington</option>
	<option value="WV">West Virginia</option>
	<option value="WI">Wisconsin</option>
	<option value="WY">Wyoming</option>
</select>
				</div>

				<div class="form-group">
					<label for="postal">Zip Code*:</label>
					<input type="text" required class="form-control" id="postal" name="postal" />
				</div>

	</div>


	<div class="order-form-right col-md-6 col-md-offset-6">
			<h2>Payment Information</h2>
			<hr />
			<p> <img src="img/pay-visa.png"> 
				<img src="img/pay-mastercard.png"> 
   				<img src="img/pay-american-ex.png">
			</p>

				<div class="form-group">
					<label for="ccName">Full Name (on the card)*:</label>
					<div class="input-group">
						<div class="input-group-prepend">
							<span class="input-group-text"><i class="fa fa-user"></i></span>
						</div>
							<input type="text" required class="form-control" id="ccName" name="ccName" placeholder="">
					</div> <!-- input-group.// -->
				</div>

					<div class="form-group">
						<label for="ccNumber">Card number*: </label>
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="fa fa-credit-card"></i></span>
							</div>
								<input type="text" required class="form-control" id="ccNumber" name="ccNumber" placeholder="">
							</div> <!-- input-group.// -->
					</div> <!-- form-group.// -->

        <div class="form-group">
            <label for="date">Expiration Date*: </label>
        	<div class="form-inline">
        		<select class="form-control" id="ccMonth" name="ccMonth" style="width:45%">
    				<option disabled value=''>Select Month</option>
    				<option value='1'>01</option>
   				    <option value='2'>02</option>
    				<option value='3'>03</option>
    				<option value='4'>04</option>
    				<option value='5'>05</option>
    				<option value='6'>06</option>
    				<option value='7'>07</option>
    				<option value='8'>08</option>
   					<option value='9'>09</option>
    				<option value='10'>10</option>
    				<option value='11'>11</option>
    				<option value='12'>12</option>
				</select>
	            <span style="width:10%; text-align: center"> / </span>
	            <select class="form-control" id="ccYear" name="ccYear" style="width:45%">
				  <option disabled value="">Select Year</option>
<?php $year=date("Y"); 
	  $x=0;
	while($x<20){
?>
				  <option value="<?php echo $year; ?>"><?php echo $year; ?></option>
<?php 
		$year++;
		$x++;
	} 	
?>

				</select>
        	</div>
        </div>

<!--
				<div class="form-group">
					<label for="ccMonth">Expiration Month*:</label>
					<input type="text" required class="form-control" id="ccMonth" name="ccMonth" />
				</div>	

				<div class="form-group">
					<label for="ccYear">Expiration Year*:</label>
					<input type="text" required class="form-control" id="ccYear" name="ccYear" />
				</div>	
-->


				<div class="form-group">
					<label for="ccCSC">Card Security code*:</label>
					<input type="password" required class="form-control" id="ccCSC" name="ccCSC" />
				</div>		

	<div class="form-group">
    	<label for="billing">Billing address same as customer's address?</label>
    	<input type="checkbox" id="billing" name="billing" value="yes">

	</div>
<div id="billing_address">
				
				<div class="form-group">
					<label for="billing_street_address">Street Address*:</label>
					<input type="text" class="form-control" id="billing_street_address" name="billing_street_address" />
				</div>

				<div class="form-group">
					<label for="billing_city">City*:</label>
					<input type="text" class="form-control" id="billing_city" name="billing_city" />
				</div>

				<div class="form-group">
					<label for="billing_province">State*:</label>
<select required class="form-control" id="billing_province" name="billing_province">
	<option value="AL">Alabama</option>
	<option value="AK">Alaska</option>
	<option value="AZ">Arizona</option>
	<option value="AR">Arkansas</option>
	<option value="CA">California</option>
	<option value="CO">Colorado</option>
	<option value="CT">Connecticut</option>
	<option value="DE">Delaware</option>
	<option value="DC">District Of Columbia</option>
	<option value="FL">Florida</option>
	<option value="GA">Georgia</option>
	<option value="HI">Hawaii</option>
	<option value="ID">Idaho</option>
	<option value="IL">Illinois</option>
	<option value="IN">Indiana</option>
	<option value="IA">Iowa</option>
	<option value="KS">Kansas</option>
	<option value="KY">Kentucky</option>
	<option value="LA">Louisiana</option>
	<option value="ME">Maine</option>
	<option value="MD">Maryland</option>
	<option value="MA">Massachusetts</option>
	<option value="MI">Michigan</option>
	<option value="MN">Minnesota</option>
	<option value="MS">Mississippi</option>
	<option value="MO">Missouri</option>
	<option value="MT">Montana</option>
	<option value="NE">Nebraska</option>
	<option value="NV">Nevada</option>
	<option value="NH">New Hampshire</option>
	<option value="NJ">New Jersey</option>
	<option value="NM">New Mexico</option>
	<option value="NY">New York</option>
	<option value="NC">North Carolina</option>
	<option value="ND">North Dakota</option>
	<option value="OH">Ohio</option>
	<option value="OK">Oklahoma</option>
	<option value="OR">Oregon</option>
	<option value="PA">Pennsylvania</option>
	<option value="RI">Rhode Island</option>
	<option value="SC">South Carolina</option>
	<option value="SD">South Dakota</option>
	<option value="TN">Tennessee</option>
	<option value="TX">Texas</option>
	<option value="UT">Utah</option>
	<option value="VT">Vermont</option>
	<option value="VA">Virginia</option>
	<option value="WA">Washington</option>
	<option value="WV">West Virginia</option>
	<option value="WI">Wisconsin</option>
	<option value="WY">Wyoming</option>
</select>
				</div>

				<div class="form-group">
					<label for="billing_postal">Zip Code*:</label>
					<input type="text" class="form-control" id="billing_postal" name="billing_postal" />
				</div>
</div>


				<div class="form-group">
					<h2>Base Price For  
					<?php echo $size; ?> Yard Dumpster: $<?php echo $price; ?></h2>
                    <input type="hidden" name="amount" value="<?php echo $price;?>" />
				</div>
				<div class="form-group text-center">
					<label for="Terms">By submitting my order, I agree to the <a class="simple-ajax-popup-align-top" href="terms.html" style="color:#000;font-weight:400;text-decoration:underline;">Terms & Conditions*</a></label>
    				<input type="checkbox" required id="Terms" name="Terms" value="yes">
				</div>
                <input type="hidden" name="size" value="<?php echo $size; ?>" />
                <input class="btn green center" type="submit" value="Submit"/>
	</div>

</div>
       <div class="clearfix"></div>
        </form>  
     </div>
</div>
        
    <!-- end container fluid -->

<?php include('includes/_footer.php'); ?>

	<script type="text/javascript">

		$(document).ready(function() {

			$( "#deliveryDate" ).datepicker({

				showOn: 'button',

				buttonImage: 'img/delivery.png',

				buttonImageOnly: true

			});

			$( "#collection" ).datepicker({

				showOn: 'button',

				buttonImage: 'img/collection.png',

				buttonImageOnly: true

			});

			$('.bin-container').hide();

		});

		function binChange(binType){

			$('.bin-container').hide();

			$('.bin-sizes').prop('checked', false);

			$('.' + binType).show();

			//alert(binType);

		}


// for the check box
$('#billing').change(function(){
        if (this.checked) {
            $('#billing_address').fadeOut('slow');
        }
        else {
            $('#billing_address').fadeIn('slow');
        }                   
    });

	</script>

<!-- Magnific Popup core JS file -->
<script src="js/popup/jquery.magnific-popup.js"></script>

</body>

</html>