Skip to content

Instantly share code, notes, and snippets.

@mopuriiswaryalakshmi

mopuriiswaryalakshmi/build-price-popupBreak-akshaya.php

Created September 19, 2018 16:40
Show Gist options
  • Save mopuriiswaryalakshmi/56429697fc1fe64e4864d176c331108c to your computer and use it in GitHub Desktop.
Save mopuriiswaryalakshmi/56429697fc1fe64e4864d176c331108c to your computer and use it in GitHub Desktop.
Download ZIP
build-price-popupBreak-akshaya
Raw
build-price-popupBreak-akshaya.php
<?php /* Template Name: BuildPrice */ ?>
<?php get_header()?>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script>
var templateUrl = '<?= get_bloginfo("template_url"); ?>';
var insideView = true;
var buildingConfig = null;
<?php
$type = "new";
if (isset($_COOKIE["configCookie"]) && isset($_COOKIE["confFlag"])) {
echo "var buildingConfig = JSON.parse($.cookie('configCookie'));";
echo "$.removeCookie('configCookie', { path: '/' });";
echo "$.removeCookie('confFlag', { path: '/' });";
}
if($_GET['code']){
$bconfig_pod = pods( 'sample_building_config', array('where' =>"name='".$_GET['code']."'"));
if($bconfig_pod->data()){
$cong_data = json_decode($bconfig_pod->data()[0]->config);
$cong_data->addonsObj = array(
"door"=> array(),
"window"=> array(),
"rollup"=> array()
);
echo "var buildingConfig=".json_encode($cong_data).";";
$type = "code";
}
else {
$type = "not_found";
}
}
$user = wp_get_current_user();
$is_admin = in_array("administrator", $user->roles);
echo "var roles=".json_encode($user->roles).";";
echo "var isAdmin = ".(($is_admin) ? 'true' : 'false').";";
$price_sheet_pod = pods( 'price_sheet' );
$query = array(
"where" => "d.state = '".$_SESSION['state']."'",
);
// $query = array();
$price_sheet_pod->find($query, $limit=1);
$prices = $price_sheet_pod->data();
if(!empty($prices)){
$price_json = json_decode($prices[0]->price_json);
echo "var price_data = ".json_encode($price_json->price_data).";";
echo "var price_enums = ".json_encode($price_json->enums).";";
}
else{
// echo " $(document).ready(function(){
// document.getElementById('noPriceAlert').style.display = 'block'
// });
// ";
}
$model_backgrounds = pods("3d_model_background");
$model_backgrounds->find(
array(
"where" => "active_status = 1"
)
);
$background_list = array();
$defBg = 0;
$counter = 0;
while ( $model_backgrounds->fetch() ) {
$skyimgfield = $model_backgrounds->field('sky');
$skyimg_url = pods_image_url($skyimgfield, null);
array_push(
$background_list,
array(
'name'=> $model_backgrounds->display( 'name' ),
'active'=> $model_backgrounds->display( 'active_status' ),
'sky'=> $model_backgrounds->display( 'sky' ),
'land'=> $model_backgrounds->display( 'land' ),
'defaut' => $model_backgrounds->display( 'make_default' )
)
);
if($model_backgrounds->display( 'make_default' ) == 'Yes'){
$defBg = $counter;
}
$counter = $counter + 1;
}
echo "var backgrounds = ".json_encode($background_list).";";
echo "var defBackgroundIndex = ".$defBg.";";
$color_samples_3d_pod = pods('color_samples_3d');
$params = array();
$color_samples_3d_pod->find($params,$limit=-1);
$color_samples_3d_data = $color_samples_3d_pod->data();
echo "var color = ".json_encode($color_samples_3d_data).";";
?>
price_enums['all width options'].sort(function(a, b){return b>a;});
price_enums['length'].sort(function(a, b){return b>a;});
price_enums['height'].sort(function(a, b){return b>a;});
price_enums['all width options'].sort(function(a, b){return b>a;});
var widthoptions = price_enums['all width options'];
var lengthOptions = price_enums['length'];
var heightOptions = price_enums['height'];
function getcbuildingConfig(){
var cbuildingConfig = jQuery.extend(true, {}, buildingConfig);
delete cbuildingConfig['addonsObj'];
for(var addonType in buildingConfig.addonsObj){
// buildingConfig.addons[addonType] = [];
cbuildingConfig.addons[addonType] = [];
buildingConfig.addonsObj[addonType].forEach(function(de){
cbuildingConfig.addons[addonType].push({
"w": de.width,
"h": de.height,
"wall": de.includedWall.wid,
"p": {
"x": de.mesh.position.x,
"y": de.mesh.position.y,
"z": de.mesh.position.z,
"r": de.mesh.rotation.y
}
});
})
}
return cbuildingConfig;
}
</script>
<style type="text/css">
.inpBut {
position: relative; }
.inpBut {
width: 70px;
height: 42px;
float: left;
text-align: center;
padding-right: 10px;
border: 1px solid #eee; }
.inpBut input:focus {
outline: 0; }
.inpBut .inpBut-nav {
float: left;
position: relative;
height: 42px; }
.inpBut .inpBut-button {
position: relative;
cursor: pointer;
border-left: 1px solid #eee;
width: 20px;
text-align: center;
color: #333;
font-size: 13px;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
line-height: 1.7;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none; }
.inpBut input[type=number]::-webkit-inner-spin-button,
.inpBut input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0; }
.inpBut input[type=number] {
-moz-appearance: textfield; }
.inpBut .inpBut-button.inpBut-up {
position: absolute;
height: 50%;
top: 0;
border-bottom: 1px solid #eee; }
.inpBut .inpBut-button.inpBut-down {
position: absolute;
bottom: -1px;
height: 50%; }
.watermarked{
background-image: url("/American-Steel/wp-content/themes/american_steel/img/logo.png");
position: absolute;
opacity: .5;
left: 50%;
top: 10%;
display: none;
}
.build-price-left-panel{
display: block;
}
@media print {
.watermarked {
display: block;
}
body{
background:#000;
}
.build-price-left-panel{
display: none;
}
}
</style>
<?php if($type != "not_found"){ ?>
<div id="body" class="container-fluid">
<div class="row">
<div class="col-md-3 build-price-left-panel border-right px-0">
<?php
if($is_admin){
?>
<script type="text/javascript">
function saveConfig(e){
var strMime = "image/jpeg";
imgData = globals.renderer.domElement.toDataURL(strMime);
cbuildingConfig = getcbuildingConfig();
var price_result = totalPrice;
document.getElementById('configPrice').value = price_result;
$("#config_inp").val(JSON.stringify(cbuildingConfig));
$("#snapshotInp").val(imgData);
$("#building_config_form").submit();
}
</script>
<div class="form-group">
<form id="building_config_form" action="<?php echo admin_url('admin-post.php'); ?>" method="POST">
<input type="hidden" name="config" id="config_inp"/>
<input type="hidden" name="snapshot" id="snapshotInp"/>
<input type="hidden" name="configPrice" id="configPrice" value = ""/>
<input type="hidden" name="action" value="save_building_config">
</form>
<button type="submit" onclick="saveConfig();" class=" btn btn-danger my-2 my-sm-0 ml-5">Save Configuration</button>
</div>
<?php
}
?>
<form>
<div class="form-group">
<dl class="row mb-0">
<dt class="col-sm-7 font-weight-normal mb-3"><input class="form-control" type="text" name="code" placeholder="Build Code"></dt>
<dd class="col-sm-5 font-montserrat-medium text-right mb-3"><button class="btn btn-danger" onclick="">Search</button></dd>
</div>
</form>
<div class="build-price-info">
<dl class="row mb-0">
<dt class="col-sm-6 font-weight-bold mb-3">Zip Code </dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3"><?php echo $_SESSION['zipcode'] ?></dd>
<dt class="col-sm-6 font-weight-bold mb-3">City </dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3"><?php echo $_SESSION['city'] ?></dd>
<dt class="col-sm-6 font-weight-bold mb-3">State </dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3"><?php echo $_SESSION['state'] ?></dd>
</dl>
<?php //var_dump($_SESSION) ?>
<!-- <dl>
<dt class="font-weight-normal">Snow Load</dt>
<dd>
<div class="row py-30 pb-0">
<div class="col-md-4">
<img src="<?php bloginfo('template_directory'); ?>/images/icons/icon_testimonials_red<?php echo $iconName;?>.svg" alt="" height="26px">
<p id="ground_load" class="zipload"><?php echo $_SESSION['ground_snow'] ?> lbs</p>
<p class="font-montserrat-semibold text-light-grey mt-2 snow-load-text">GROUND SNOW LOAD</p>
</div>
<div class="col-md-4">
<img src="<?php bloginfo('template_directory'); ?>/images/icons/icon_testimonials_red<?php echo $iconName;?>.svg" alt="" height="26px">
<p id="ground_load" class="zipload"><?php echo $_SESSION['roof_snow'] ?> lbs</p>
<p class="font-montserrat-semibold text-light-grey mt-2 snow-load-text">ROOF SNOW (LIVE) LOAD</p>
</div>
<div class="col-md-4">
<img src="<?php bloginfo('template_directory'); ?>/images/icons/icon_testimonials_red<?php echo $iconName;?>.svg" alt="" height="26px">
<p id="ground_load" class="zipload"><?php echo $_SESSION['wind_snow'] ?> lbs</p>
<p class="font-montserrat-semibold text-light-grey mt-2 snow-load-text">WIND LOAD</p>
</div>
</div>
</dd>
</dl> -->
</div>
<div class="faq measurements">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header">
<p class="mb-0 font-montserrat-medium">
Background
</p>
</div>
<div class="card-block">
<div class="form-group">
<select id="background_option" class="form-control" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);" onchange="onbackgroundChange()">
<?php foreach($background_list as $key=>$value){ ?>
<option value="<?php echo $key; ?>" <?php echo $key==$defBg ? "selected": "" ; ?>><?php echo $value['name']; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="mb-3">
<div class="card-header">
<p class="mb-0 font-montserrat-medium">
Installation Surface
</p>
</div>
<div class="card-block">
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="frameType" id="floorOption" value="default" onchange="onFloorChange(this)" checked>
<span class="radio-text pl-2"> Default</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="frameType" id="floorOption" value="concrete" onchange="onFloorChange(this)" checked>
<span class="radio-text pl-2"> Concrete</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="frameType" id="floorOption" value="alphal" onchange="onFloorChange(this)">
<span class="radio-text pl-2"> Asphalt</span>
</label>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-danger" role="tab" id="gaugeHeader">
<a data-toggle="collapse" data-parent="#accordion" href="#gaugeCollapse" aria-expanded="true" aria-controls="gaugeCollapse" class="collapsed">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
Gauge <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="gaugeCollapse" class="collapse" role="tabpanel" aria-labelledby="gaugeHeader">
<div class="card-block">
<select id="pcountry" class="form-control" name="pcountry" onchange="gaugeOnChange(this)" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="12">12 Gauge (heavy duty)</option>
<option value="14" selected>14 Gauge (economical)</option>
</select>
</div>
</div>
</div><!-- gauge card -->
<div class="card">
<div class="card-header bg-danger" role="tab" id="roofStyleHeader">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#roofStyleCollapse" aria-expanded="false" aria-controls="roofStyleCollapse">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
Roof Style <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="roofStyleCollapse" class="collapse" role="tabpanel" aria-labelledby="roofStyleHeader">
<div class="card-block">
<div class="mb-3">
<span class="mb-2 d-block">Frame Type</span>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="frameType" id="frameType1" value="0" onchange="roofstyle_onchange(this)">
<span class="radio-text pl-2">A-Frame</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="frameType" id="frameType2" value="1" onchange="roofstyle_onchange(this)" checked>
<span class="radio-text pl-2">Standard</span>
</label>
</div>
</div>
<div class="">
<span class="mb-2 d-block">Siding Direction</span>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="sidingDirection" id="sidingDirection1" value="0" onchange="orientation_onchange(this)" oninput="orientation_onchange(this)" checked= "checked">
<span class="radio-text pl-2">Horizontal</span>
</label>
</div>
<div class="form-check mb-0">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="sidingDirection" id="sidingDirection2" value="1" disabled=false onchange="orientation_onchange(this)" oninput="orientation_onchange(this)" >
<span class="radio-text pl-2">Vertical</span>
</label>
</div>
</div>
</div>
</div>
</div><!-- roofStyle -->
<div class="card">
<div class="card-header bg-danger" role="tab" id="dimensionsHeader">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#dimensionsCollapse" aria-expanded="false" aria-controls="dimensionsCollapse">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
Dimensions <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="dimensionsCollapse" class="collapse" role="tabpanel" aria-labelledby="dimensionsHeader">
<div class="card-block">
<div class="form-group row">
<label for="example-text-input" class="col-6 col-form-label align-self-center">Width</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input id="widthRange" type="number" min="12" max="30" step="2" value="12" onchange="width_range_onchange(this, event)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Length</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id = "unitLength" min="20" max="50" value="20" step = "5" onchange="length_range_onchange(this)">
</div>
</div>
</div>
<div class="form-group row mb-0">
<label for="" class="col-6 col-form-label align-self-center">Height</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id = "unitHeight" min="6" max="12" step="1" value="6" onchange="height_range_onchange(this)">
</div>
</div>
</div>
</div>
</div>
</div><!-- Dimensions -->
<div class="card">
<div class="card-header bg-danger" role="tab" id="wallStyleHeader">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#wallStyleCollapse" aria-expanded="false" aria-controls="wallStyleCollapse">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
Wall Style <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="wallStyleCollapse" class="collapse" role="tabpanel" aria-labelledby="wallStyleHeader">
<div class="card-block">
<div class="form-group">
<label id="wallStyleLeft">Left</label>
<select id="left_wall_type_inp" class="form-control" name="wallStyle" onchange="sideWallOnchange('Left')" oninput="sideWallOnchange('Left')" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="1">Open</option>
<option value="2">Partial</option>
<option value="0">Closed</option>
</select>
</div>
<div class="form-group row">
<label for="" class="col-8 col-form-label align-self-center">Number of Panels</label>
<div class="col-4 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="partial_wall_inp_left" min="1" step="1" value="1" style="display: none;" onchange="sideWallOnchange('Left')" oninput="sideWallOnchange('Left')">
</div>
</div>
</div>
<div class="form-group">
<label for="wallStyleRight">Right</label>
<select id="right_wall_type_inp" class="form-control" name="wallStyle" onchange="sideWallOnchange('Right')" oninput="sideWallOnchange('Right')" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="1">Open</option>
<option value="2">Partial</option>
<option value="0">Closed</option>
</select>
</div>
<div class="form-group row">
<label for="" class="col-8 col-form-label align-self-center">Number of Panels</label>
<div class="col-4 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="partial_wall_inp_right" min="1" step="1" value="1" style="display: none;" onchange="sideWallOnchange('Right')" oninput="sideWallOnchange('Right')">
</div>
</div>
</div>
<div class="">
<span class="mb-2 d-block">Siding Direction</span>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="sidewallOrientationH" name="sidewallOrientation" value="0" onchange="sidewallOrientation_onchange(this)" checked="checked" >
<span class="radio-text pl-2">Horizontal</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="sidewallOrientationV" name="sidewallOrientation" onchange="sidewallOrientation_onchange(this)" value="1" disabled=false>
<span class="radio-text pl-2">Vertical</span>
</label>
</div>
</div>
</div>
</div>
</div><!-- Wall Style -->
<div class="card">
<div class="card-header bg-danger" role="tab" id="endStyleHeader">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#endStyleCollapse" aria-expanded="false" aria-controls="endStyleCollapse">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
End Style <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="endStyleCollapse" class="collapse" role="tabpanel" aria-labelledby="endStyleHeader">
<div class="card-block">
<div class="form-group">
<label for="endStyleFront">Front</label>
<select id="front_wall" onchange="front_wall_onchange(this)" oninput="front_wall_onchange(this)" class="form-control" name="endStyle" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="1">Open</option>
<option value="2">Gable</option>
<option value="0">Closed</option>
</select>
</div>
<div class="form-group">
<label for="endStyleBack">Back</label>
<select id="back_wall" onchange="back_wall_onchange(this)" oninput="back_wall_onchange(this)" class="form-control" name="endStyle" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="1">Open</option>
<option value="2">Gable</option>
<option value="0">Closed</option>
</select>
</div>
<div class="">
<span class="mb-2 d-block">Siding Direction</span>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="endwallOrientationH" name="endwallOrientation" onchange="endwallOrientation_onchange(this)" value="0" checked>
<span class="radio-text pl-2">Horizontal</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="endwallOrientationV" name="endwallOrientation" onchange="endwallOrientation_onchange(this)" value="1" disabled=false>
<span class="radio-text pl-2">Vertical</span>
</label>
</div>
</div>
<p class="text-danger">*Extended Gables come with one-3’ sheet metal under the gable. Can be modified.</p>
</div>
</div>
</div><!-- End Style -->
<div class="card">
<div class="card-header bg-danger" role="tab" id="doorsWindowsHeader">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#doorsWindowsCollapse" aria-expanded="false" aria-controls="doorsWindowsCollapse">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
Doors & Windows <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="doorsWindowsCollapse" class="collapse" role="tabpanel" aria-labelledby="doorsWindowsHeader">
<div class="card-block">
<div class="form-group row">
<label for="" class="col-6 mb-0">Dimensions</label>
<div class="col-6 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" id="Btnswitch" onchange="dragDimensionChange(this)" class="switch-input">
<label for="Btnswitch" class="switch-button"></label>
<label for="Btnswitch" class="switch-circle"></label>
</div>
</div>
</div>
<div class="form-group">
<label for="door">Door</label>
<select id="door" class="form-control" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);" onChange="createNewDobj(value)">
<option value="">--</option>
<option value='{"label":"door","width":"36","height":"72"}'>36”x72”</option>
<option value='{"label":"door","width":"36","height":"80"}'>36”x80”</option>
<option value='{"label":"door","width":"36","height":"84"}'>36”x84”</option>
<option value='{"label":"door","width":"48","height":"84"}'>48”x84”</option>
</select>
</div>
<div id="door_listing">
</div>
<div class="form-group">
<label for="rollup">Rollup</label>
<select id="rollup" class="form-control" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg" onChange="createNewDobj(value)">
<option value=''>--</option>
<option value='{"label":"rollup","width":"72","height":"84"}'>6'x7'</option>
<option value='{"label":"rollup","width":"96","height":"84"}'>8'x7'</option>
<option value='{"label":"rollup","width":"108","height":"84"}'>9'x7'</option>
<option value='{"label":"rollup","width":"120","height":"96"}'>10'x8'</option>
<option value='{"label":"rollup","width":"120","height":"120"}'>10'x10'</option>
</select>
</div>
<div id="rollup_listing">
</div>
<div class="form-group">
<label for="window">Window</label>
<select id="window" class="form-control" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg)" onChange="createNewDobj(value)">
<option value=''>--</option>
<option value='{"label":"window","width":"30","height":"30"}'>30”x30”</option>
</select>
</div>
<div id="window_listing">
</div>
<!-- <div class="row mb-3">
<div class="col-6">30”x30”</div>
<div class="col-6 text-right">
<a href=""><img src="<?php bloginfo('template_url'); ?>/images/icons/icon_move<?php echo $iconName;?>.svg" height="16px"></a>
<a href="" class="ml-3"><img src="<?php bloginfo('template_url'); ?>/images/icons/icon_delete<?php echo $iconName;?>.svg" height="16px"></a>
</div>
</div> -->
</div>
</div>
</div><!-- Doors & Windows -->
<div class="card">
<div class="card-header bg-danger" role="tab" id="colorOptionsHeader">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#colorOptionsCollapse" aria-expanded="false" aria-controls="colorOptionsCollapse">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
Color Options <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="colorOptionsCollapse" class="collapse" role="tabpanel" aria-labelledby="colorOptionsHeader">
<div class="card-block">
<div class="form-group">
<label for="colorOptionsRoof">Roof</label>
<select id="roofColor" onchange="roofColorOnChange(this)" class="form-control" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="black">Black</option>
<option value="evergreen">Evergreen</option>
<option value="quaker-gray">Quaker Gray</option>
<option value="clay">Clay</option>
<option value="earthbrown" selected>Earth Brown</option>
<option value="pebble-beige">Pebble Beige</option>
<option value="slateblue">Slate Blue</option>
<option value="barn-red">Barn Red</option>
<option value="burgundy">Burgundy</option>
<option value="pewter-gray">Pewter Gray</option>
<option value="rawhide">Raw Hide</option>
<option value="white">White</option>
</select>
</div>
<div class="form-group">
<label for="colorOptionsRidgeCap">Ridge Cap</label>
<select id="ridgeColor" onchange="ridgeColorOnChange(this)" class="form-control" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="black">Black</option>
<option value="evergreen">Evergreen</option>
<option value="quaker-gray">Quaker Gray</option>
<option value="clay">Clay</option>
<option value="earthbrown" selected>Earth Brown</option>
<option value="pebble-beige">Pebble Beige</option>
<option value="slateblue">Slate Blue</option>
<option value="barn-red">Barn Red</option>
<option value="burgundy">Burgundy</option>
<option value="pewter-gray">Pewter Gray</option>
<option value="rawhide">Raw Hide</option>
<option value="white">White</option>
</select>
</div>
<div class="form-group">
<label for="colorOptionsTrim">Trim</label>
<select id="trimColor" onchange="trimColorOnChange(this)" class="form-control" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="black">Black</option>
<option value="evergreen">Evergreen</option>
<option value="quaker-gray">Quaker Gray</option>
<option value="clay">Clay</option>
<option value="earthbrown" selected>Earth Brown</option>
<option value="pebble-beige">Pebble Beige</option>
<option value="slateblue">Slate Blue</option>
<option value="barn-red">Barn Red</option>
<option value="burgundy">Burgundy</option>
<option value="pewter-gray">Pewter Gray</option>
<option value="rawhide">Raw Hide</option>
<option value="white">White</option>
</select>
</div>
<div class="form-group">
<label for="colorOptionsSideWalls">Side Walls</label>
<select id="sidewallColor" onchange="sidewallColorOnChange(this)" class="form-control" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="black">Black</option>
<option value="evergreen">Evergreen</option>
<option value="quaker-gray">Quaker Gray</option>
<option value="clay">Clay</option>
<option value="earthbrown" selected>Earth Brown</option>
<option value="pebble-beige">Pebble Beige</option>
<option value="slateblue">Slate Blue</option>
<option value="barn-red">Barn Red</option>
<option value="burgundy">Burgundy</option>
<option value="pewter-gray">Pewter Gray</option>
<option value="rawhide">Raw Hide</option>
<option value="white">White</option>
</select>
</div>
<div class="form-group">
<label for="colorOptionsEnd">End Walls</label>
<select id="endwallColor" onchange="endwallColorOnChange(this)" class="form-control" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="black">Black</option>
<option value="evergreen">Evergreen</option>
<option value="quaker-gray">Quaker Gray</option>
<option value="clay">Clay</option>
<option value="earthbrown" selected>Earth Brown</option>
<option value="pebble-beige">Pebble Beige</option>
<option value="slateblue">Slate Blue</option>
<option value="barn-red">Barn Red</option>
<option value="burgundy">Burgundy</option>
<option value="pewter-gray">Pewter Gray</option>
<option value="rawhide">Raw Hide</option>
<option value="white">White</option>
</select>
</div>
<div>
<div class="form-group row">
<label for="wainscotEnabled" class="col-8 mb-0 font-montserrat-medium">Wainscot(Main Unit)</label>
<div class="col-4 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" onchange="wainscotOptions(this)" id="wainscotEnabled" class="switch-input">
<label for="wainscotEnabled" class="switch-button"></label>
<label for="wainscotEnabled" class="switch-circle"></label>
</div>
</div>
</div>
<div class="form-group">
<label for="wainscotColor">Wainscot Color</label>
<select id = "wainscotOption" onchange="wainscotColorOnChange(this)" class="form-control" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="black">Black</option>
<option value="evergreen">Evergreen</option>
<option value="quaker-gray">Quaker Gray</option>
<option value="clay">Clay</option>
<option value="earthbrown" selected>Earth Brown</option>
<option value="pebble-beige">Pebble Beige</option>
<option value="slateblue">Slate Blue</option>
<option value="barn-red">Barn Red</option>
<option value="burgundy">Burgundy</option>
<option value="pewter-gray">Pewter Gray</option>
<option value="rawhide">Raw Hide</option>
<option value="white">White</option>
</select>
</div>
</div>
<div>
<div class="form-group row">
<label for="ltwainscotEnabled" class="col-8 mb-0 font-montserrat-medium">Wainscot(Lean To)</label>
<div class="col-4 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" onchange="ltwainscotOptions(this)" id="ltwainscotEnabled" class="switch-input">
<label for="ltwainscotEnabled" class="switch-button"></label>
<label for="ltwainscotEnabled" class="switch-circle"></label>
</div>
</div>
</div>
<div class="form-group">
<label for="ltwainscotColor">Wainscot Color</label>
<select id = "ltwainscotOption" onchange="ltwainscotColorOnChange(this)" class="form-control" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="black">Black</option>
<option value="evergreen">Evergreen</option>
<option value="quaker-gray">Quaker Gray</option>
<option value="clay">Clay</option>
<option value="earthbrown" selected>Earth Brown</option>
<option value="pebble-beige">Pebble Beige</option>
<option value="slateblue">Slate Blue</option>
<option value="barn-red">Barn Red</option>
<option value="burgundy">Burgundy</option>
<option value="pewter-gray">Pewter Gray</option>
<option value="rawhide">Raw Hide</option>
<option value="white">White</option>
</select>
</div>
</div>
</div>
</div>
</div><!-- Color Options -->
<div class="card">
<div class="card-header bg-danger" role="tab" id="wainscotHeader">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#wainscotCollapse" aria-expanded="false" aria-controls="wainscotCollapse">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
Wainscot <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="wainscotCollapse" class="collapse" role="tabpanel" aria-labelledby="wainscotHeader">
<div class="card-block">
<div class="form-group row">
<label for="wainscotEnabled" class="col-8 mb-0 font-montserrat-medium">Enabled</label>
<div class="col-4 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" onchange="wainscotOptions(this)" id="wainscotEnabled" class="switch-input">
<label for="wainscotEnabled" class="switch-button"></label>
<label for="wainscotEnabled" class="switch-circle"></label>
</div>
</div>
</div>
<div class="form-group">
<label for="wainscotColor">Color</label>
<select id = "wainscotOption" onchange="wainscotColorOnChange(this)" class="form-control" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="black">Black</option>
<option value="evergreen">Evergreen</option>
<option value="quaker-gray">Quaker Gray</option>
<option value="clay1">Clay</option>
<option value="earthbrown" selected>Earth Brown</option>
<option value="pebble-beige">Pebble Beige</option>
<option value="slateblue">Slate Blue</option>
<option value="barn-red">Barn Red</option>
<option value="burgundy">Burgundy</option>
<option value="pewter-gray">Pewter Gray</option>
<option value="rawhide">Raw Hide</option>
<option value="white">White</option>
</select>
</div>
</div>
</div>
</div><!-- Wainscot -->
<div class="card">
<div class="card-header bg-danger" role="tab" id="leanToHeader">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#leanToCollapse" aria-expanded="false" aria-controls="leanToCollapse">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
Lean To <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="leanToCollapse" class="collapse" role="tabpanel" aria-labelledby="leanToHeader">
<div class="card-block">
<div class="front">
<div class="form-group row">
<label for="" class="col-6 mb-0 font-montserrat-medium">Front</label>
<div class="col-6 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" id="leanToFront" class="switch-input" onchange="frontleantoOnAdd(this)">
<label for="leanToFront" class="switch-button"></label>
<label for="leanToFront" class="switch-circle"></label>
</div>
</div>
</div>
<div class="w-75 mx-auto">
<div class="form-group row">
<label for="example-text-input" class="col-6 col-form-label align-self-center">Width</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="fltwidth" min="6" max="15" step="1" value="12" onchange="frontleantoWidth(this)" oninput="frontleantoWidth(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Leg Height</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="frlegheight" step="1" min="5" max="11" value="11" onchange="frontleantolegheight(this)" oninput="frontleantolegheight(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Drop</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="fltdrop" max = "4" min = "0" step = "1" value="0" onchange="frontleantoDrop(this)" oninput="frontleantoDrop(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Cut 1</label>
<div class="col-6 d-flex justify-content-end">
<input type="number" class = "inpBut" id="fltcut" max = "25" min = "0" value="0" step="" onchange="return frontleantoOnCut1(this)" oninput=" return frontleantoOnCut1(this)">
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Cut 2</label>
<div class="col-6 d-flex justify-content-end">
<input type="number" class="inpBut" id="frtcut" value ="0" max = "25" min = "0" step = "" onchange="frontleantoOnCut2(this)" oninput="frontleantoOnCut2(this)">
</div>
</div>
</div>
</div><!-- front -->
<div class="left">
<div class="form-group row">
<label for="" class="col-6 mb-0 font-montserrat-medium">Left</label>
<div class="col-6 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" id="leanToLeft" class="switch-input" onclick="leftleantoOnAdd(this)">
<label for="leanToLeft" class="switch-button"></label>
<label for="leanToLeft" class="switch-circle"></label>
</div>
</div>
</div>
<div class="w-75 mx-auto">
<div class="form-group row">
<label for="example-text-input" class="col-6 col-form-label align-self-center">Width</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="lltwidth" step="1" min="6" max="15" value="12" onchange="leftleantoWidth(this)" oninput="leftleantoWidth(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Leg Height</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="leftlegheight" step="1" min="5" max="11" value="11" onchange="leftleantolegheight(this)" oninput="leftleantolegheight(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Drop</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="lltdrop" max = "4" min = "0" step = "1" value="0" onchange="leftleantoDrop(this)" oninput="leftleantoDrop(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Cut 1</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="lltcut" max = "45" min = "0" step = "5" value="0" onchange="leftleantoOnCut1(this)" oninput="leftleantoOnCut1(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Cut 2</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="lrtcut" max = "45" min = "0" step = "5" value="0" onchange="leftleantoOnCut2(this)" oninput="leftleantoOnCut2(this)">
</div>
</div>
</div>
</div>
</div><!-- Left -->
<div class="right">
<div class="form-group row">
<label for="" class="col-6 mb-0 font-montserrat-medium">Right</label>
<div class="col-6 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" id="leanToRight" class="switch-input" onchange = "rightleantoOnAdd(this)">
<label for="leanToRight" class="switch-button"></label>
<label for="leanToRight" class="switch-circle"></label>
</div>
</div>
</div>
<div class="w-75 mx-auto">
<div class="form-group row">
<label for="example-text-input" class="col-6 col-form-label align-self-center">Width</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="rltwidth" step="1" min="6" max="15" value="12" onchange="rightleantoWidth(this)" oninput="rightleantoWidth(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Leg Height</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="rightlegheight" step="1" min="5" max="11" value="11" onchange="rightleantolegheight(this)" oninput="rightleantolegheight(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Drop</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="rltdrop" max = "4" min = "0" step = "1" value="0" onchange="rightleantoDrop(this)" oninput="rightleantoDrop(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Cut 1</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="ltcut" max = "45" min = "0" step = "5" value="0" onchange="rightleantoOnCut1(this)" oninput="rightleantoOnCut1(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Cut 2</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="rtcut" max = "45" min = "0" step = "5" value="0" onchange="rightleantoOnCut2(this)" oninput="rightleantoOnCut2(this)">
</div>
</div>
</div>
</div>
</div><!-- Right -->
<div class="back">
<div class="form-group row">
<label for="" class="col-6 mb-0 font-montserrat-medium">Back</label>
<div class="col-6 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" id="leanToBack" class="switch-input" onchange="backleantoOnAdd(this)">
<label for="leanToBack" class="switch-button"></label>
<label for="leanToBack" class="switch-circle"></label>
</div>
</div>
</div>
<div class="w-75 mx-auto">
<div class="form-group row">
<label for="example-text-input" class="col-6 col-form-label align-self-center">Width</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="bltwidth" step="1" min="6" max="15" value="12" onchange="backleantoWidth(this)" oninput="backleantoWidth(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Leg Height</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="bclegheight" step="1" min="5" max="11" value="11" onchange="backleantolegheight(this)" oninput="backleantolegheight(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Drop</label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="bltdrop" max = "4" min = "0" step = "1" value="0" onchange="backleantoDrop(this)" oninput="backleantoDrop(this)">
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Cut 1</label>
<div class="col-6 d-flex justify-content-end">
<input type="number" id="bltcut" class="inpBut" max = "25" min = "0" step = "" value="0" onchange="backleantoOnCut1(this)" oninput="backleantoOnCut1(this)">
</div>
</div>
<div class="form-group row">
<label for="" class="col-6 col-form-label align-self-center">Cut 2</label>
<div class="col-6 d-flex justify-content-end">
<input type="number" class = "inpBut" id="brtcut" max = "25" min = "0" step = "" value="0" onchange="backleantoOnCut2(this)" oninput="backleantoOnCut2(this)">
</div>
</div>
</div>
</div><!-- Back -->
<div class="">
<span class="mb-2 d-block">Siding Direction</span>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="ltsidingDirection" id="ltsidingDirection1" value="0" onchange="leanto_orientation_onchange(this)" oninput="leanto_orientation_onchange(this)" checked= "checked">
<span class="radio-text pl-2">Horizontal</span>
</label>
</div>
<div class="form-check mb-0">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="ltsidingDirection" id="ltsidingDirection2" value="1" disabled=false onchange="leanto_orientation_onchange(this)" oninput="leanto_orientation_onchange(this)" >
<span class="radio-text pl-2">Vertical</span>
</label>
</div>
</div>
<div><br></div>
<label class="font-montserrat-medium">Lean-To Wall Option</label>
<div class="card-block">
<div class="form-group">
<label id="wallStyleLeft">Left </label>
<select id="lt_left_wall_type_inp" class="form-control" name="wallStyle" onchange="ltosideWallOnchange('Left')" oninput="ltosideWallOnchange('Left')" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="1">Open</option>
<option value="2">Partial</option>
<option value="0">Closed</option>
</select>
</div>
<div class="form-group row">
<label for="" class="col-8 col-form-label align-self-center">Number of Panels</label>
<div class="col-4 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="lt_partial_wall_inp_left" min="1" step="1" value="1" style="display: none;" onchange="ltosideWallOnchange('Left')" oninput="ltosideWallOnchange('Left')">
</div>
</div>
</div>
<div class="form-group">
<label for="wallStyleRight">Right</label>
<select id="lt_right_wall_type_inp" class="form-control" name="wallStyle" onchange="ltosideWallOnchange('Right')" oninput="ltosideWallOnchange('Right')" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="1">Open</option>
<option value="2">Partial</option>
<option value="0">Closed</option>
</select>
</div>
<div class="form-group row">
<label for="" class="col-8 col-form-label align-self-center">Number of Panels</label>
<div class="col-4 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="lt_partial_wall_inp_right" min="1" step="1" value="1" style="display: none;" onchange="ltosideWallOnchange('Right')" oninput="ltosideWallOnchange('Right')">
</div>
</div>
</div>
<div class="form-group">
<label for="wallStyleRight">Front</label>
<select id="lt_front_wall_type_inp" class="form-control" name="wallStyle" onchange="ltoendWallOnchange('Front')" oninput="ltoendWallOnchange('Front')" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="1">Open</option>
<option value="2">Partial</option>
<option value="0">Closed</option>
</select>
</div>
<div class="form-group row">
<label for="" class="col-8 col-form-label align-self-center">Number of Panels</label>
<div class="col-4 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="lt_partial_wall_inp_front" min="1" step="1" value="1" style="display: none;" onchange="ltoendWallOnchange('Front')" oninput="ltoendWallOnchange('Front')">
</div>
</div>
</div>
<div class="form-group">
<label for="wallStyleRight">Back</label>
<select id="lt_back_wall_type_inp" class="form-control" name="wallStyle" onchange="ltoendWallOnchange('Back')" oninput="ltoendWallOnchange('Back')" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="1">Open</option>
<option value="2">Partial</option>
<option value="0">Closed</option>
</select>
</div>
<div class="form-group row">
<label for="" class="col-8 col-form-label align-self-center">Number of Panels</label>
<div class="col-4 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" id="lt_partial_wall_inp_back" min="1" step="1" value="1" style="display: none;" onchange="ltoendWallOnchange('Back')" oninput="ltoendWallOnchange('Back')">
</div>
</div>
</div>
</div>
<div class="wrap">
<label class="font-montserrat-medium">Wrap</label>
<div class="w-75 mx-auto">
<div class="form-group row">
<label for="leanToFrontRight" class="col-8 mb-0 font-montserrat-medium">Front - Right</label>
<div class="col-4 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" id="leanToFrontRight" class="switch-input" onchange="frWrap(this)">
<label for="leanToFrontRight" class="switch-button"></label>
<label for="leanToFrontRight" class="switch-circle"></label>
</div>
</div>
</div>
<div class="form-group row">
<label for="leanToFrontLeft" class="col-8 mb-0 font-montserrat-medium">Front - Left</label>
<div class="col-4 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" id="leanToFrontLeft" class="switch-input" onchange ="flWrap(this)">
<label for="leanToFrontLeft" class="switch-button"></label>
<label for="leanToFrontLeft" class="switch-circle"></label>
</div>
</div>
</div>
<div class="form-group row">
<label for="leanToBackRight" class="col-8 mb-0 font-montserrat-medium">Back - Right</label>
<div class="col-4 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" id="leanToBackRight" class="switch-input" onchange="brWrap(this)">
<label for="leanToBackRight" class="switch-button"></label>
<label for="leanToBackRight" class="switch-circle"></label>
</div>
</div>
</div>
<div class="form-group row">
<label for="leanToBackLeft" class="col-8 mb-0 font-montserrat-medium">Back - Left</label>
<div class="col-4 d-flex justify-content-end align-self-center">
<div class="switch">
<input type="checkbox" id="leanToBackLeft" class="switch-input" onchange="blWrap(this)">
<label for="leanToBackLeft" class="switch-button"></label>
<label for="leanToBackLeft" class="switch-circle"></label>
</div>
</div>
</div>
</div>
</div><!-- wrap -->
<div class="">
<span class="mb-2 d-block">Siding Direction</span>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="leantowallOrientationH" name="leantowallOrientation" onchange="leantowallOrientation_onchange(this)" value="0" checked>
<span class="radio-text pl-2">Horizontal</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="leantowallOrientationV" name="leantowallOrientation" onchange="leantowallOrientation_onchange(this)" value="1" disabled=false>
<span class="radio-text pl-2">Vertical</span>
</label>
</div>
</div>
</div>
</div>
</div><!-- Lean To -->
<div class="card">
<div class="card-header bg-danger" role="tab" id="optionsHeader">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#optionsCollapse" aria-expanded="false" aria-controls="optionsCollapse">
<p class="mb-0 font-montserrat-medium text-white font-weight-bold">
Options <span class="icon-add float-right"></span>
</p>
</a>
</div>
<div id="optionsCollapse" class="collapse" role="tabpanel" aria-labelledby="optionsHeader">
<div class="card-block">
<div class="mb-3">
<span class="mb-2 d-block">Screw Color</span>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="screwColor" id="screwColor1" value="0" onchange="screwColorChange(this)">
<span class="radio-text pl-2">Standard Metal</span>
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="screwColor" id="screwColor2" value="1" onchange="screwColorChange(this)">
<span class="radio-text pl-2">Colored Screws</span>
</label>
</div>
</div>
<div class="form-group">
<label for="insulation">
<p class="font-montserrat-medium mb-0">Insulation </p>
<p class="font-montserrat-medium mb-0">(Available for Vertical Options only)</p>
<p class="mb-0"> R-Value 16, Radiant & Vapor Barrier, Great for Heat, Condensation & Cold.</p>
</label>
<select id="insulation" class="form-control" onchange="insulationChange(this)" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="0">None</option>
<option value="1">Roof</option>
<option value="3">Sides</option>
<option value="4">Ends</option>
<option value="2">Full Insulated</option>
</select>
</div>
<div class="form-group">
<label for="anchors">Anchors</label>
<select id="anchors_option" onchange="anchorsOptionChange()" class="form-control" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="0" selected>None</option>
<option value="1">Concrete</option>
<option value="2">Mobile Home</option>
<option value="3">Asphalt</option>
</select>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-8 pr-0 col-form-label align-self-center">
<p class="font-montserrat-medium mb-0">Number of Anchors </p>
<p>90 MPH Wind Warranty</p>
</label>
<div class="col-4 d-flex justify-content-end">
<div class="quantity d-block">
<input type="number" onchange="anchorsOptionChange()" step = "1" min = "0" style="display: none;" value="12" id="anchors_option_numbers" name="anchors_option">
</div>
</div>
</div>
<div class="form-group row">
<label for="extraTrusses" class="col-8 col-form-label align-self-center">Extra Trusses</label>
<div class="col-4 d-flex justify-content-end">
<div class="quantity d-block">
<input onchange="eTrussOptionChange(this);" type="number" value="0" min = "0" step = "1" id="extra_trusses_option">
</div>
</div>
</div>
<p class="font-montserrat-medium">Extra Metal Sheets</p>
<div class="form-group row">
<label for="extra_sheet_21" class="col-6 col-form-label align-self-center"><span>21’</span><span class="float-right">x</span></label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input onchange="ExtraSheetChange();" style="" type="number" step = "1" min = "0" value="0" id="extra_sheet_21">
</div>
</div>
</div>
<div class="form-group row">
<label for="extra_sheet_26" class="col-6 col-form-label align-self-center"><span>26’</span><span class="float-right">x</span></label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input onchange="ExtraSheetChange()" style="" type="number" step = "1" value="0" min = "0" id="extra_sheet_26">
</div>
</div>
</div>
<div class="form-group row">
<label for="extra_sheet_31" class="col-6 col-form-label align-self-center"><span>31’</span><span class="float-right">x</span></label>
<div class="col-6 d-flex justify-content-end">
<div class="quantity d-block">
<input onchange="ExtraSheetChange()" style="" type="number" step = "1" value="0" min = "0" id="extra_sheet_31">
</div>
</div>
</div>
<!-- <div class="form-group">
<label for="anchors">Background</label>
<select id="background_option" class="form-control" name="door" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);" onchange="onbackgroundChange()">
<?php foreach($background_list as $key=>$value){ ?>
<option value="<?php echo $key; ?>" <?php echo $key==$defBg ? "selected": "" ; ?>><?php echo $value['name']; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label for="anchors">Floor Options</label>
<select id="floorOption" onchange="onFloorChange(this)" class="form-control" style="background-image: url(<?php bloginfo('template_url'); ?>/images/icons/icon_dropdown.svg);">
<option value="default" selected>None</option>
<option value="concrete">Concrete</option>
<option value="alphal">Asphalt</option>
</select>
</div> -->
</div>
</div>
</div><!-- Options -->
</div>
</div>
<div class="faq pricing-list">
<div class="build-price-info price-details px-0">
<dl class="row mb-0 pt-2 px-0 m-0 border-bottom">
<dt class="col-sm-6 font-weight-medium mb-3">Base Price </dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3">$<span id="base_price"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Gauge</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="gauge_value"></span></dd>
</dl>
<dl class="row mb-0 pt-2 px-0 m-0 border-bottom">
<dt class="col-sm-6 font-weight-medium mb-3">Roof Style</dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3">$ <span id="roof_style"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Frame Type</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="frame_type"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Siding Direction</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="sliding_direction"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Roof Color</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="roof_color"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Trim Color</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="trim_color"></span></dd>
</dl>
<dl class="row mb-0 pt-2 px-0 m-0 border-bottom">
<dt class="col-sm-6 font-weight-medium mb-3">Dimensions</dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3">$<span id="dimensions"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Width</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="d_width"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Length</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="d_length"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Height</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="d_height"></span></dd>
</dl>
<dl class="row mb-0 pt-2 px-0 m-0 border-bottom">
<dt class="col-sm-6 font-weight-medium mb-3">Wall Style</dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3">$<span id="wall_style"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Left</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="w_left"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Right</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="w_right"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Siding Direction</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="w_sliding_direction"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Color</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="w_s_color"></span></dd>
</dl>
<dl class="row mb-0 pt-2 px-0 m-0 border-bottom">
<dt class="col-sm-6 font-weight-medium mb-3">End Style</dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3">$ <span id="end_style"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Front</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="e_front"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Back</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="e_back"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Siding Direction</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="e_sliding_direction"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Color</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="e_color"></span></dd>
</dl>
<dl class="row mb-0 pt-2 px-0 m-0 border-bottom" id="wd_dsply">
<dt class="col-sm-6 font-weight-medium mb-3">Doors & Windows</dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3">$ <span id="doors_windows"></span></dd>
<!-- <dt class="col-sm-12 font-weight-medium my-3">Front</dt> -->
<!-- <dt class="col-sm-5 font-weight-normal mb-3">Walk-in</dt>
<span class="col-sm-1">1</span>
<dd class="col-sm-5 font-montserrat-normal text-right mb-3"><span id="f_walk_in"></span></dd>
<dt class="col-sm-5 font-weight-normal mb-3">Roll-up</dt>
<span class="col-sm-1">1</span>
<dd class="col-sm-5 font-montserrat-normal text-right mb-3"><span id="f_roll_up"></span></dd>
<dt class="col-sm-5 font-weight-normal mb-3">Window</dt>
<span class="col-sm-1">1</span>
<dd class="col-sm-5 font-montserrat-normal text-right mb-3"><span id="f_window"></span></dd> -->
<!-- <dt class="col-sm-12 font-weight-medium my-3">left</dt>
<dt class="col-sm-5 font-weight-normal mb-3">Walk-in</dt>
<span class="col-sm-1">1</span>
<dd class="col-sm-5 font-montserrat-normal text-right mb-3"><span id="l_walk_in"></span></dd>
<dt class="col-sm-5 font-weight-normal mb-3">Roll-up</dt>
<span class="col-sm-1">1</span>
<dd class="col-sm-5 font-montserrat-normal text-right mb-3"><span id="l_rool_up"></span></dd>
<dt class="col-sm-5 font-weight-normal mb-3">Window</dt>
<span class="col-sm-1">1</span>
<dd class="col-sm-5 font-montserrat-normal text-right mb-3"><span id="l_window"></span></dd> -->
</dl>
<dl class="row mb-0 pt-2 px-0 m-0 border-bottom">
<dt class="col-sm-6 font-weight-medium mb-3">Wainscot</dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3">$ <span id="wainscot"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Color</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="w_color"></span></dd>
</dl>
<dl class="row mb-0 pt-2 px-0 m-0 border-bottom">
<dt class="col-sm-6 font-weight-medium mb-3">Lean To</dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3">$<span id="learn_to_price"></span></dd>
<dt class="col-sm-12 font-weight-medium mb-3">Front</dt>
<dt class="col-sm-6 font-weight-normal mb-3">Width</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="fr_width">NA</span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Height</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="fr_height"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Drop</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="fr_drop"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Cut 1</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="fr_cut1"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Cut 2</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="fr_cut2"></span></dd>
<dt class="col-sm-12 font-weight-medium mb-3">Back</dt>
<dt class="col-sm-6 font-weight-normal mb-3">Width</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="bk_width">NA</span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Height</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="bk_height"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Drop</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="bk_drop"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Cut 1</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="bk_cut1"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Cut 2</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="bk_cut2"></span></dd>
<dt class="col-sm-12 font-weight-medium mb-3">Left</dt>
<dt class="col-sm-6 font-weight-normal mb-3">Width</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="lf_width">NA</span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Height</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="lf_height"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Drop</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="lf_drop"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Cut 1</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="lf_cut1"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Cut 2</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="lf_cut2"></span></dd>
<dt class="col-sm-12 font-weight-medium mb-3">Right</dt>
<dt class="col-sm-6 font-weight-normal mb-3">Width</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="rt_width">NA</span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Height</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="rt_height"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Drop</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="rt_drop"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Cut 1</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="rt_cut1"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Cut 2</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="rt_cut2"></span></dd>
</dl>
<dl class="row mb-0 pt-2 px-0 m-0 border-bottom">
<dt class="col-sm-6 font-weight-medium mb-3">Options</dt>
<dd class="col-sm-6 font-montserrat-medium text-right mb-3">$<span id="options_price"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Screw Color</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="screw_color"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Anchors</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="anchors"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">Extra Trusses</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="extra_trusses"></span></dd>
<dt class="col-sm-12 font-weight-medium mb-3">Extra Metal Sheets</dt>
<dt class="col-sm-6 font-weight-normal mb-3">21’</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="extra_metal21"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">26’</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="extra_metal26"></span></dd>
<dt class="col-sm-6 font-weight-normal mb-3">31’</dt>
<dd class="col-sm-6 font-montserrat-normal text-right mb-3"><span id="extra_metal31"></span></dd>
</dl>
<div class="final-pricing">
<dl class="row py-3 px-0 m-0">
<dt class="col-sm-6 font-montserrat-medium text-danger">Total Price</dt>
<dt class="col-sm-6 font-montserrat-medium text-danger text-right">$ <span id="total_price"></span></dt>
</dl>
</div>
</div><!-- price-details -->
</div>
</div><!-- build-price-left-panel -->
<div class="col-md-9 px-0">
<div class="tool-holder" id = "tool-holder">
<button class="btn btn-danger my-2 my-sm-0 ml-3 " id="arView" style="display: none; position: absolute; top : 10px;color: #ffffff;" > <a href="../ar" style="color: #ffffff;">AR View</a> </button>
<img class="watermarked" src="/American-Steel/wp-content/themes/american_steel/img/logo.png" alt="Watermark">
</div>
<div class="tool-content">
<ul class="list-inline d-flex flex-row mb-0">
<li>
<h5 class="font-montserrat-medium" id = "widthValue">12’</h5>
<p class="mb-0">Width</p>
</li>
<li>
<h5 class="font-montserrat-medium" id = "lengthValue">20’</h5>
<p class="mb-0">Length</p>
</li>
<li>
<h5 class="font-montserrat-medium" id = "heightValue">6’</h5>
<p class="mb-0">Height</p>
</li>
<li>
<h5 class="font-montserrat-medium" id = "gaugeValue">14</h5>
<p class="mb-0">Guage</p>
</li>
<li>
<h5 class="font-montserrat-medium" id = "doorNo">0</h5>
<p class="mb-0">Doors</p>
</li>
<li>
<h5 class="font-montserrat-medium" id = "windowNo">0</h5>
<p class="mb-0">Windows</p>
</li>
</ul>
</div>
<div class="tool-descriptions">
<div class="row m-0">
<div class="col-sm-12 col-md-6 col-lg-6">
<div class="row m-0">
<div class="col-sm-12 col-md-5 col-lg-5 px-0 py-2 border-right">
<span class="text-danger toll-free-number" id="price_result"></span>
</div>
<div class="col-sm-12 col-md-7 col-lg-7 px-1 py-2 align-self-center border-right">
<span><b>$<span id="downpayment"></span> </b>Down Payment today</span>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 px-0 py-2 align-self-center"><b class="text-danger">Installation and Delivery included!</b>
<button class="btn btn-danger my-2 my-sm-0 ml-3 request-quote-btn" id="onRequestFetchPrice" onclick="displayFinalStatus()">Request Quote</button>
</div>
<!-- <div class="col-3 pt-2 border-top">
<dl>
<dt class="font-weight-normal">Snow / Wind Load</dt>
<dd>
<div class="row py-30 pb-0">
<div class="col-md-4">
<img src="<?php bloginfo('template_directory'); ?>/images/icons/icon_testimonials_red<?php echo $iconName;?>.svg" alt="" height="26px">
<p id="ground_load" class="zipload"><?php echo $_SESSION['ground_snow'] ?> lbs</p>
<p class="font-montserrat-semibold text-light-grey mt-2 snow-load-text">GROUND SNOW LOAD</p>
</div>
<div class="col-md-4">
<img src="<?php bloginfo('template_directory'); ?>/images/icons/icon_testimonials_red<?php echo $iconName;?>.svg" alt="" height="26px">
<p id="ground_load" class="zipload"><?php echo $_SESSION['roof_snow'] ?> lbs</p>
<p class="font-montserrat-semibold text-light-grey mt-2 snow-load-text">ROOF SNOW (LIVE) LOAD</p>
</div>
<div class="col-md-4">
<img src="<?php bloginfo('template_directory'); ?>/images/icons/icon_testimonials_red<?php echo $iconName;?>.svg" alt="" height="26px">
<p id="ground_load" class="zipload"><?php echo $_SESSION['wind_snow'] ?> lbs</p>
<p class="font-montserrat-semibold text-light-grey mt-2 snow-load-text">WIND LOAD</p>
</div>
</div>
</dd>
</dl>
</div>
-->
<div class="col-12 pt-2 border-top">
<p class="font-montserrat-medium build-information"> <i><b><label class ="text-danger" style=" font-size: 20px; text-align: center;">“This tool is intended to be used for visual and price estimation purposes only.”</label></b></i></p>
<p class="font-montserrat-medium build-information">
<i>Prices are subject to change without notice. American Steel Carports, Inc. / American Carports, Inc. are
not responsible for price errors. Truss design will vary depending on local codes. Verify with your city for
snow &amp; wind requirements to make sure your building meets local codes. This tool is intended for
“estimation” purposes only.<span class="text-danger" style=""> Extra trusses/material may be required for heavy snow &amp; high wind loads or
per door placement on side wall not shown in graphic or in price.</span> Installation is included on your leveled
land. Colors may vary. Standard unit come with a 6” overhang on each roof end. Taxes not included.
</i>
</p>
</div>
</div>
<div class="row m-0 border-top onquote-view border-bottom">
<div class="col-sm-12 col-md-4 orders-list pt-2 px-0 border-right">
<div class="font-montserrat-medium mb-3 px-4">All Orders C.O.D</div>
<dl class="row m-0 px-4 mb-3 border-bottom">
<dt class="col-sm-6 px-0 font-weight-normal">Price</dt>
<dd class="col-sm-6 px-0 font-montserrat-normal text-right" id = "priceVal">$ 20155.00</dd>
<dt class="col-sm-6 px-0 font-weight-normal">Tax Rate</dt>
<dd class="col-sm-6 px-0 font-montserrat-normal text-right">
<div class="input-group">
<input type="number" min = "0" max="100" id="taxRateid"class="form-control" onclick = "taxFunc(this);" onchange ="taxFunc(this)">%
</div>
</dd>
<dt class="col-sm-6 px-0 font-weight-normal">Tax</dt>
<dd class="col-sm-6 px-0 font-montserrat-normal text-right" id = "taxRes">$ 0.00</dd>
<dt class="col-sm-6 px-0 font-weight-normal">Total</dt>
<dd class="col-sm-6 px-0 font-montserrat-normal text-right" id = "totalpriceVal">$ 20155.00</dd>
<dt class="col-sm-6 px-0 font-weight-normal">Down Payment</dt>
<dd class="col-sm-6 px-0 font-montserrat-normal text-right">
<div class="input-group">
<input type="number" class="form-control" id="downpaymentid" min="10" max = "100" value="10" onclick = "taxFunc(this);" onchange ="taxFunc(this)">%
</div>
</dd>
<dt class="col-sm-6 px-0 font-weight-normal">Balance Before Taxes</dt>
<dd class="col-sm-6 px-0 font-montserrat-normal text-right" id = "btax">$ 2015.50</dd>
<dt class="col-sm-6 px-0 font-weight-normal">Plans / Equipment Return Fee </dt>
<dd class="col-sm-6 px-0 font-montserrat-normal text-right">
<div><input type="number" class="form-control" placeholder ="$" id = "PlanERP" onclick = "taxFunc(this);" onchange="taxFunc(this);">
</div>
</dd>
<dt class="col-sm-6 px-0 font-weight-normal">Balance Due</dt>
<dd class="col-sm-6 px-0 font-montserrat-normal text-right" id = "dueval">$18139.50</dd>
</dl>
<div class="px-4 font-14"><i>
If there is a price discrepancy over $20 American Steel Inc. reserves the right to cancel this quote or order.</i>
</div>
</div>
<script type="text/javascript">
function req_quote(e){
var strMime = "image/jpeg";
imgData = globals.renderer.domElement.toDataURL(strMime);
var cbuildingConfig = getcbuildingConfig();
$("#config_inp_quote").val(JSON.stringify(cbuildingConfig));
$("#snapshotInpQuote").val(imgData);
// $("#req_3d_quote").validate();
if($("#req_3d_quote").valid()){
$("#req_3d_quote").submit();
}
else{
return false;
}
}
</script>
<div class="col-sm-12 col-md-8 pt-2 px-0">
<div class="quote-form px-4">
<div class="font-montserrat-medium mb-3">Receive your Quote</div>
<p class="font-14">Enter your contact info below and click “Get a Quote!” to receive your quote by email.</p>
<div class="row">
<div class="col-8">
<form class="" role="" id="req_3d_quote" action="<?php echo admin_url('admin-post.php'); ?>" method="POST" data-parsley-validate>
<input type="hidden" name="action" value="req_quote_3d">
<input type="hidden" name="config" id="config_inp_quote">
<input type="hidden" name="snapshot" id="snapshotInpQuote">
<div class="form-group">
<label for="bname">Name<sup class="text-danger">*</sup></label>
<input type="text" class="form-control" id="bname" name="name" required="">
</div>
<div class="form-group">
<label for="bemail">Email<sup class="text-danger">*</sup></label>
<input type="email" data-parsley-type="email" class="form-control" id="bemail" name="email" required="">
</div>
<div class="form-group">
<label for="btel">Phone<sup class="text-danger">*</sup></label>
<input type="text" class="form-control" id="btel" name="phone" data-parsley-pattern-message="Please enter a valid Phone Number of the form 123-456-7899" data-parsley-pattern="^[2-9]\d{2}-\d{3}-\d{4}$" maxlength="12" required="">
</div>
<div class="form-group">
<label for="bsales">Sales Person</label>
<input type="text" class="form-control" id="bsales" name="sales" required>
</div>
<input type="hidden" name="bzipcode" value="<?php echo $_SESSION["zipcode"]?>">
<input type="hidden" id="bprice" name="bprice" value="" >
<input type="hidden" id="taxrate" name="taxrate" value="" >
<input type="hidden" id="taxprice" name="taxprice" value="" >
<input type="hidden" id="totalamt" name="totalamt" value="" >
<input type="hidden" id="dpayment" name="dpayment" value="" >
<input type="hidden" id="bbtaxes" name="bbtaxes" value="" >
<input type="hidden" id="perfee" name="perfee" value="" >
<input type="hidden" id="duebal" name="duebal" value="" >
<div class="form-group">
<label for="bstate">State<sup class="text-danger">*</sup></label>
<select class="form-control" id="bstate" name="state" required="" style="background-image: url(http://localhost/newAS/American-Steel/wp-content/themes/american_steel/images/icons/icon_dropdown.svg);">
<option value="">Select-One</option>
<?php
$stateList=stateData();
foreach ($stateList as $key => $value) { ?>
<option value="<?php echo $value ?>" ><?php echo $value ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="<?php echo reCAPTCHA_public_key ?>" data-callback="recaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
<span id='errorContainer'></span>
<!-- <input class="form-control d-none" data-recaptcha="true"
data-error="Please complete the Captcha"> -->
<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">
<div class="clearfix"></div>
<!-- <div class="help-block with-errors"></div> -->
</div>
<div class="row">
<ul class="list-unstyled" style="display:flex;">
<li class="d-inline-block ml-3"><button onclick="location.reload(); return false" class="btn btn-grey">Start Over</button></li>
<li class="d-inline-block ml-3"><button name="bsubmit" class="btn btn-danger" id="onSubmitFetchPrice" >Get a Quote!</button></li>
</ul>
</div>
<li class="d-inline-block"><u><a class="text-danger" href="<?php echo get_page_link( get_page_by_title( 'financing' )->ID ); ?>">Financing Available</a></u></li>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } else {?>
<br/>
<div class="container">
<div class="col-md-12">
<div class="alert alert-dismissible alert-danger fade-in" >
<a href="#" class="close" data-dismiss="alert" aria-label="close" >&times;</a>
Code Not found, or removed
</div>
</div>
</div>
<?php } ?>
<script src="<?php bloginfo('template_url'); ?>/js/three.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/OrbitControls.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/OBJLoader.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/popper.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/model.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/draggable.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/calculatePrice.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/hat_channels.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/leanto.js"></script>
<script type="text/javascript">
$('.price-details,.onquote-view ').hide();
$('.request-quote-btn').on('click', function(){
$('.price-details,.onquote-view ').show();
$('.measurements').hide();
});
</script>
<script type="text/javascript" defer>
$(document).ready(function(){
init();
animate();
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
document.getElementById('arView').style.display = "block";
}
})
var zipcode="<?php echo $_SESSION['zipcode']?>";
if(zipcode == null || zipcode == ""){
$('#zipCodeModal').modal('show');
}
$(document).on('hidden.bs.modal', '#zipCodeModal',function (e) {
var value = $.cookie("zipCodeAvail");
// alert(value);
// if( (!zipcode_success) || (($.cookie("zipCodeAvail") == null) || ($.cookie("zipCodeAvail") == false))){
if( ((value == "false") || ($.cookie("zipCodeAvail") == undefined)) && (zipcode.length < 5)){
$('#zipCodeModal').modal('show');
//alert(zipcode.length== 5);
}
});
</script>
<script>
$('#onSubmitFetchPrice').click(function(){
var price_result=$('#price_result').text();
document.getElementById('bprice').value = price_result;
document.getElementById('taxrate').value = tax;
document.getElementById('taxprice').value = taxresult;
document.getElementById('totalamt').value = totval;
document.getElementById('dpayment').value = downpayment;
document.getElementById('bbtaxes').value = totalPrice - dpbeforetax;
document.getElementById('perfee').value = PlanERPprice;
document.getElementById('duebal').value = totval - downpayment + PlanERPprice;
return req_quote();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
loadSky();
loadLand();
updateValue();
});
</script>
<script type="text/javascript">
$("#arView").click(function(){
$.cookie('configCookie', JSON.stringify(buildingConfig), { path: '/' });
$.cookie('camPos',JSON.stringify(globals.camera.position),{ path: '/' });
});
</script>
<script type="text/javascript">
function recaptchaCallback() {
document.getElementById('myField').value = 'nonEmpty';
}
function expiredRecaptchaCallback(){
document.getElementById('myField').value = '';
}
</script>
<?php get_footer()?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment