| Current File : /home/itiffy/rockyjohnsonconcrete.com/wp-content/themes/rockyjohnson/calculator.php |
<?php
/*Template Name: Calculator*/
get_header();
?>
<?php include_once('top.php'); ?>
<!-- CONTENT SECTION -->
<div class="content-section clearfix">
<div class="calculor-welcome-section clearfix">
<div class="container">
<!-- <h3>Welcome to the Rocky Johnson job estimator!</h3>
<p>Knowing how much fund is needed for a job is incredibly important.</p>-->
<?php the_content();?>
</div>
</div>
<div class="calculor-section clearfix">
<div class="container">
<span id="step_landing">
<h5>Select the job you want Estimated</h5>
<div class="select-box clearfix">
<ul>
<?php
$i=0;
if( have_rows('tasks') ):
while ( have_rows('tasks') ) : the_row();
$i++;
?>
<li>
<label class="radio-container"><?php the_sub_field('name');?>
<input type="radio" <?php echo ($i==1)?'checked="checked"':''?> name="task" value="<?php the_sub_field('name');?>">
<span class="checkmark"></span>
<span class="task-price invisible"><?php the_sub_field('price_square_feet');?></span>
<span class="task-type invisible"><?php the_sub_field('type');?></span>
</label>
</li>
<?php
endwhile;
endif;
?>
</ul>
</div>
<div class="estimated-box clearfix">
<div class="row">
<div class="col-lg-7 col-md-6 text-right">Enter the total square foot area of the project:<small>For basements and foundations enter the square footage of exterior of all vertical surfaces.</small></div>
<div class="col-lg-3 col-md-3">
<input required name="area" id="area" type="text" placeholder="Ex: 500" onkeypress="javascript:return isNumber(event)">
</div>
<div class="col-lg-2 col-md-3"><span>Square Foot (ft2)</span></div>
</div>
</div>
<?php
if( have_rows('include_materials') ):
?>
<div class="materials-box clearfix">
<h6>All concrete jobs include supply and Install of the following materials :</h6>
<ul class="clearfix">
<?php
while ( have_rows('include_materials') ) : the_row();
?>
<li><?php the_sub_field('name');?></li>
<?php
endwhile;
?>
</ul>
</div>
<?php
endif;
?>
<div class="btn-next"><a href="javascript:void(0);" onClick="next_step2()">Next</a></div>
</span>
<!---For Color Type--->
<span id="step_color" class="full-width-step" style="display:none;">
<h5>Select the color you want to use</h5>
<div class="color-box clearfix">
<ul class="clearfix">
<?php
if( have_rows('color') ):
while ( have_rows('color') ) : the_row();
?>
<li color_price="<?php the_sub_field('price_per_square_foot');?>">
<div class="c-box" style="background-color:<?php the_sub_field('code');?>"> </div>
<div class="c-name"><?php the_sub_field('name');?></div>
</li>
<?php
endwhile;
endif;
?>
</ul>
</div>
<h5>Select the default color to use</h5>
<div class="default-color-box clearfix">
<ul class="clearfix">
<?php
if( have_rows('default_color') ):
while ( have_rows('default_color') ) : the_row();
?>
<li color_price="0">
<div class="c-box" style="background-color:<?php the_sub_field('code');?>"> </div>
<div class="c-name"><?php the_sub_field('name');?></div>
</li>
<?php
endwhile;
endif;
?>
</ul>
</div>
<div class="btn-previous left"><a href="javascript:void(0);" onClick="previous('step_landing','step_color')">Previous</a></div>
<div class="btn-next right"><a href="javascript:void(0);" onClick="next_step3()">Next</a></div>
</span>
<!-- End-->
<!-- Stamp-->
<span id="step_stamp" class="full-width-step" style="display:none;">
<h5>Select the Stamp Design</h5>
<div class="design-box clearfix">
<ul class="clearfix">
<?php
if( have_rows('stapms') ):
while ( have_rows('stapms') ) : the_row();
$image_object = get_sub_field('image');
$image_size = 'thumbnail';
$image_url = $image_object['sizes'][$image_size];
?>
<li stamp_price="<?php the_sub_field('price_per_square_feet_');?>" style="background:url(<?php echo $image_url;?>) no-repeat center;"><div class="d-name"><?php the_sub_field('name');?></div></li>
<?php
endwhile;
endif;
?>
</ul>
</div>
<div class="btn-previous left"><a href="javascript:void(0);" onClick="previous('step_color','step_stamp')">Previous</a></div>
<div class="btn-next right"><a href="javascript:void(0);" onClick="next_step4()">Next</a></div>
</span>
<!-- End-->
<!-- Information-->
<span id="step_information" class="full-width-step" style="display:none;">
<h5>Enter your information</h5>
<div class="information-box clearfix">
<form id="informaiton" name="information" onsubmit="return false;">
<div class="field">
<input name="full_name" id="full_name" type="text" placeholder="Your Name" required>
</div>
<div class="field">
<input name="phone_number" id="phone_number" type="text" placeholder="Your contact number" required>
</div>
<div class="field">
<input name="email" id="email" type="text" placeholder="Your email address" required>
</div>
<div class="field">
<textarea name="message" id="message" cols="" rows="" placeholder="Any special message you want to convey"></textarea>
</div>
<div class="btn-next"><a href="javascript:void(0);" onClick="next_step5()"><i class="fas fa-spinner fa-spin loader"></i>Submit</a></div>
<!--<div class="field text-center">
<input name="" value="Submit" type="submit">
</div>-->
</form>
</div>
</span>
<!--End Information-->
<!-- Check off Option 1-->
<span id="step_checkoff_option1" class="full-width-step" style="display:none;">
<h5>Check off your options!</h5>
<div class="options-box clearfix">
<ul class="clearfix">
<?php
if( have_rows('checkbox_option1_materials') ):
while ( have_rows('checkbox_option1_materials') ) : the_row();
?>
<li>
<label class="checkbox-container"><?php the_sub_field('name');?>
<input type="checkbox" value='<?php echo addslashes(get_sub_field("name"));?>'>
<span class="checkmark"></span>
<span class="option1_price" option1_price='<?php the_sub_field('price');?>'></span>
<span class="option1_price_type" option1_price_type='<?php the_sub_field('price_type');?>'></span>
</label>
<?php if(get_sub_field('type')=='Checkbox And Number'):?>
<div class="numbers-row">
<input type="text" value="1">
</div>
<?php endif;?>
</li>
<?php
endwhile;
endif;
?>
</ul>
</div>
<div class="btn-previous left"><a href="javascript:void(0);" onClick="previous('step_landing','step_checkoff_option1')">Previous</a></div>
<div class="btn-next right"><a href="javascript:void(0);" onClick="next_step6()">Next</a></div>
</span>
<!-- End--->
<!-- Checkoff option2-->
<span id="step_checkoff_option2" class="full-width-step" style="display:none;">
<h5>Check off your options!</h5>
<div class="options2-box clearfix">
<ul class="clearfix">
<?php
if( have_rows('checkbox_option2_materials') ):
while ( have_rows('checkbox_option2_materials') ) : the_row();
?>
<li>
<label class="checkbox-container"><?php the_sub_field('name');?>
<input type="checkbox" value='<?php echo addslashes(get_sub_field("name"));?>'>
<span class="checkmark"></span>
<span class="option2_price" option2_price='<?php the_sub_field('price');?>'></span>
<span class="option2_price_type" option2_price_type='<?php the_sub_field('price_type');?>'></span>
</label>
<?php if(get_sub_field('type')=='Checkbox And Number'):?>
<div class="numbers-row">
<input type="text" value="1">
</div>
<?php endif;?>
</li>
<?php
endwhile;
endif;
?>
</ul>
</div>
<div class="btn-previous left"><a href="javascript:void(0);" onClick="previous('step_landing','step_checkoff_option2')">Previous</a></div>
<div class="btn-next right"><a href="javascript:void(0);" onClick="next_step7()">Next</a></div>
</span>
<!-- End-->
<!--- Success page--->
<span id="step_success" class="full-width-step" style="display:none;">
<h5>Your estimated project cost is</h5>
<div class="cost-box clearfix">
<h2 class="total-estimate-price"></h2>
<?php echo apply_filters('the_content',get_field('success_message'));?>
<!--<h6>This is a basic estimated price at average competitive rates. Any additions, design changes and special requests may change the price and can be added on the the next pages or contact us for more complicated jobs.</h6>
<p> </p>
<p><img src="<?php echo get_template_directory_uri(); ?>/images/banner-logo.png" alt=""></p>
<p> </p>
<h4>Thank you for choosing Rocky Johnson Contracting!</h4>-->
</div>
</span>
<!---End--->
<span class="clearfix"></span>
<span id="error_message"></span>
</div>
</div>
</div>
<!-- Hidden text-->
<input type="hidden" name="hidden_task" id="hidden_task">
<input type="hidden" name="hidden_task_price" id="hidden_task_price">
<input type="hidden" name="hidden_include_materials" id="hidden_include_materials">
<input type="hidden" name="hidden_task_type" id="hidden_task_type">
<input type="hidden" name="hidden_area" id="hidden_area">
<input type="hidden" name="hidden_color_code" id="hidden_color_code">
<input type="hidden" name="hidden_color_name" id="hidden_color_name">
<input type="hidden" name="hidden_color_price" id="hidden_color_price">
<input type="hidden" name="hidden_stamp_name" id="hidden_stamp_name">
<input type="hidden" name="hidden_stamp_image" id="hidden_stamp_image">
<input type="hidden" name="hidden_stamp_price" id="hidden_stamp_price">
<input type="hidden" name="hidden_checkoff_option1" id="hidden_checkoff_option1">
<input type="hidden" name="hidden_checkoff_option2" id="hidden_checkoff_option2">
<!-- /CONTENT SECTION -->
<!--Footer start-->
<?php get_footer(); ?>
<?php include_once('commonJs.php'); ?>
<script type="text/javascript">
function isNumber(evt) {
var iKeyCode = (evt.which) ? evt.which : evt.keyCode
if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
return false;
return true;
}
function previous(back_id,current_id){
jQuery("#"+current_id).slideUp("slow");
jQuery("#"+back_id).slideDown( "slow" );
}
function next_step2(){
var area=jQuery("#area").val();
var task = jQuery("input[name='task']:checked");
var task_price=task.next("span").next(".task-price").text();
var task_type=task.next("span").next().next(".task-type").text();
var include_materials_array=new Array();
if(jQuery('.materials-box').find('li').length>0){
jQuery('.materials-box').find('li').each(function() {
include_materials_array.push($.trim($(this).text()));
});
}
jQuery('#hidden_include_materials').val(JSON.stringify(include_materials_array));
if(task.length==0){
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please select the jobs you want estimated.</div>');
}else if(area==""){
jQuery("#area").css('border-color', 'red');
jQuery("#area").focus();
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please enter the total area you want estimated.</div>');
}else {
var numbers = /^-?\d*(\.\d+)?$/;
if(!area .match(numbers)){
jQuery("#area").css('border-color', 'red');
jQuery("#area").focus();
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please input numeric characters only.</div>');
return false;
}
jQuery("#error_message").html('');
jQuery("#area").css('border-color', '#FFFFFF');
jQuery("#hidden_task").val(task.val());
jQuery("#hidden_task_price").val(task_price);
jQuery("#hidden_task_type").val(task_type);
jQuery("#hidden_area").val(area);
if(task_type=='Color' || task_type=='Color And Stamps'){
jQuery("#step_landing").slideUp("slow");
jQuery("#step_color").slideDown( "slow" );
}else if(task_type=='Check Off Option1'){
jQuery("#step_landing").slideUp("slow");
jQuery("#step_checkoff_option1").slideDown( "slow" );
}else if(task_type=='Check Off Option2'){
jQuery("#step_landing").slideUp("slow");
jQuery("#step_checkoff_option2").slideDown( "slow" );
}
}
}
function next_step3(){
if(jQuery(".color-box").find('li.active').length>0 || jQuery(".default-color-box").find('li.active').length>0){
jQuery("#error_message").html('');
//var color_code=$(".color-box").find('li.active').attr("style").replace("background-color:", "");
if(jQuery(".color-box").find('li.active').length>0){
var color_code=$(".color-box").find('li.active').find(".c-box").attr("style").replace("background-color:", "");
var color_name=$(".color-box").find('li.active').find(".c-name").text();
var color_price = $(".color-box").find('li.active').attr("color_price");
}else{
var color_code=$(".default-color-box").find('li.active').find(".c-box").attr("style").replace("background-color:", "");
var color_name=$(".default-color-box").find('li.active').find(".c-name").text();
var color_price = $(".default-color-box").find('li.active').attr("color_price");
}
jQuery("#hidden_color_code").val(color_code);
jQuery("#hidden_color_name").val(color_name);
jQuery("#hidden_color_price").val(color_price);
if(jQuery("#hidden_task_type").val()=='Color And Stamps'){
jQuery("#step_color").slideUp("slow");
jQuery("#step_stamp").slideDown( "slow" );
}else{
jQuery("#step_color").slideUp("slow");
jQuery("#step_information").slideDown( "slow" );
}
}else{
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please select the color you want to use.</div>');
}
}
function next_step4(){
if(jQuery(".design-box").find('li.active').length>0){
jQuery("#error_message").html('');
var stamp_image = $(".design-box").find('li.active').attr("style").replace("background:url(", '').replace(')','').replace("no-repeat center;","");
var stamp_price = $(".design-box").find('li.active').attr("stamp_price");
var stamp_name=$(".design-box").find('li.active').find(".c-name").text();
jQuery("#hidden_stamp_name").val(stamp_name);
jQuery("#hidden_stamp_price").val(stamp_price);
jQuery("#hidden_stamp_image").val(stamp_image);
if(jQuery("#hidden_task_type").val()=='Color And Stamps'){
jQuery("#step_stamp").slideUp("slow");
jQuery("#step_information").slideDown( "slow" );
}
}else{
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please select the stamp design.</div>');
}
}
function next_step5(){
var full_name=jQuery("#full_name").val();
var phone_number=jQuery("#phone_number").val();
var email=jQuery("#email").val();
var message=jQuery("#message").val();
if(full_name==''){
jQuery("#email").css('border-color', '#FFFFFF');
jQuery("#phone_number").css('border-color', '#FFFFFF');
jQuery("#full_name").css('border-color', 'red');
jQuery("#full_name").focus();
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please enter your name.</div>');
}else if(phone_number==''){
jQuery("#email").css('border-color', '#FFFFFF');
jQuery("#full_name").css('border-color', '#FFFFFF');
jQuery("#phone_number").css('border-color', 'red');
jQuery("#phone_number").focus();
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please enter your phone number.</div>');
}else if(email==''){
jQuery("#phone_number").css('border-color', '#FFFFFF');
jQuery("#full_name").css('border-color', '#FFFFFF');
jQuery("#email").css('border-color', 'red');
jQuery("#email").focus();
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please enter your email.</div>');
}else{
jQuery("#phone_number").css('border-color', '#FFFFFF');
jQuery("#full_name").css('border-color', '#FFFFFF');
jQuery("#email").css('border-color', '#FFFFFF');
if(phone_number.length<8){
jQuery("#phone_number").css('border-color', 'red');
jQuery("#phone_number").focus();
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please enter minimum 8 characters phone number.</div>');
return false;
}
var filter = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(filter.test(email)){
jQuery(".loader").css('display','inline-block');
jQuery("#email").css('border-color', '#FFFFFF');
jQuery("#error_message").html('');
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
var data = {
task: jQuery("#hidden_task").val(),
task_price: jQuery("#hidden_task_price").val(),
task_type: jQuery("#hidden_task_type").val(),
area: jQuery("#hidden_area").val(),
color_code: jQuery("#hidden_color_code").val(),
color_name: jQuery("#hidden_color_name").val(),
color_price: jQuery("#hidden_color_price").val(),
stamp_name: jQuery("#hidden_stamp_name").val(),
stamp_image: jQuery("#hidden_stamp_image").val(),
stamp_price: jQuery("#hidden_stamp_price").val(),
checkoff_option1: jQuery("#hidden_checkoff_option1").val(),
checkoff_option2: jQuery("#hidden_checkoff_option2").val(),
fullname: full_name,
phone_number:phone_number,
email:email,
message:message,
include_materials:jQuery("#hidden_include_materials").val(),
action: "ajax_sent_mail"
};
$.post(ajaxurl, data, function(response) {
var $obj=JSON.parse(response);
if($obj.status==1){
jQuery(".total-estimate-price").html($obj.total_price);
jQuery("#error_message").html('');
jQuery("#step_information").slideUp("slow");
jQuery("#step_success").slideDown( "slow" );
}else{
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Some error occured.Please try again later.</div>');
}
jQuery(".loader").hide();
});
}else{
jQuery("#email").css('border-color', 'red');
jQuery("#email").focus();
jQuery("#error_message").html('<div class="alert alert-danger mt-2"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Error!</strong> Please enter valid email.</div>');
}
}
}
function next_step6(){
var option_array=new Array();
if(jQuery('.options-box').find('input[type="checkbox"]:checked').length>0){
jQuery('.options-box').find('input[type="checkbox"]:checked').each(function() {
//console.log(jQuery(this).parent().find('.option1_price').attr('option1_price'));
var price=parseFloat(jQuery(this).parent().find('.option1_price').attr('option1_price'));
var price_type=jQuery.trim(jQuery(this).parent().find('.option1_price_type').attr('option1_price_type'));
var no_off=jQuery(this).parent().next(".numbers-row").find('input[type="text"]');
var value = jQuery.trim(jQuery(this).val());
//console.log(value);
var no_off_value='';
if(no_off.length>0){
no_off_value=parseInt(no_off.val());
}
option_array.push({name:value,price_type:price_type,price:price,no_off:no_off_value});
//option_array['name']=value;
//console.log(this.value);
});
//console.log(option_array);
}
jQuery('#hidden_checkoff_option1').val(JSON.stringify(option_array));
jQuery("#step_checkoff_option1").slideUp("slow");
jQuery("#step_information").slideDown( "slow" );
/* var checkbox_array_value=JSON.parse(jQuery('#hidden_checkoff_option1').val());
if(checkbox_array_value.length>0){
jQuery.each( checkbox_array_value, function( key, value ) {
console.log( key + ": " + value.name+": " + value.price+": " + value.no_off );
});
}*/
}
function next_step7(){
var option_array=new Array();
if(jQuery('.options2-box').find('input[type="checkbox"]:checked').length>0){
jQuery('.options2-box').find('input[type="checkbox"]:checked').each(function() {
var price=parseFloat(jQuery(this).parent().find('.option2_price').attr('option2_price'));
var price_type=jQuery.trim(jQuery(this).parent().find('.option2_price_type').attr('option2_price_type'));
var no_off=jQuery(this).parent().next(".numbers-row").find('input[type="text"]');
var value = jQuery.trim(jQuery(this).val());
var no_off_value='';
if(no_off.length>0){
no_off_value=parseInt(no_off.val());
}
option_array.push({name:value,price_type:price_type,price:price,no_off:no_off_value});
});
}
jQuery('#hidden_checkoff_option2').val(JSON.stringify(option_array));
jQuery("#step_checkoff_option2").slideUp("slow");
jQuery("#step_information").slideDown( "slow" );
}
jQuery(".color-box").on("click",'li',function(){
jQuery(this).parent().find('li').removeClass('active');
jQuery(this).addClass('active');
});
jQuery(".default-color-box").on("click",'li',function(){
jQuery(".color-box").find('li').removeClass('active');
jQuery(this).parent().find('li').removeClass('active');
jQuery(this).addClass('active');
});
jQuery(".design-box").on("click",'li',function(){
jQuery(this).parent().find('li').removeClass('active');
jQuery(this).addClass('active');
});
jQuery(function() {
jQuery(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');
jQuery(".button").on("click", function() {
var $button = jQuery(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Dont allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
});
});
</script>
</body>
</html>