<%
' (SS,20/08/19) calculator for Ground Screw Centre
' (SS,17/04/20) added 750mm for shed, removed 1200mm, removed bracket option:  <option value='3" x 2"'>3" x 2"</option>
' (SS,24/04/20) changed name "budget" brackets to "standard" brackets
' (SS,28/04/20) removed Garden Bin Store: <option value="Garden Bin Store">Garden Bin Store</option>  
' *** need to remove from javascript because it's now redundant
' (SS,10/5/20) added bracket option back in:  <option value='3" x 2"'>3" x 2"</option>
' also added alert for fitting options distance being 150 miles
' (SS,11/5/20) changed limit from 8.54m to 500m due to decking in function gscCalculate()
' (SS,18/5/20) removed "Buy ground screws and deck base" from fitting options, deck base only available if fitting
' (SS,19/5/20) removed 6" x 2" or 8" x 2" bracket option, replaced 4" x 2"  with 4" x 2" or 6" x 2", fixes issue where no brackets showing for 6" x 2" or 8" x 2" options because there aren't any brackets for this option 
' (SS,27/5/20) various improvements including additional loads and items.
' (SS,30/5/20) bug fixes and don't show additional items if fitting chosen
' (SS,02/06/20) pricing alert text change
' (SS,03/06/20) added Log Cabin and Workshop, and set new order, Garden Shed changed to Shed
' (SS,23/06/20) further changes 
' (SS,30/06/20) further changes 
' (SS,03/07/20) further minor changes
' (SS,10/03/21) Added ProfessionalToolAlert to show when 15 or more screws required, alert text shown via CustomGSCShowProfessionalTotalAlert in customutils.asp
' (SS,25/05/21) Adjust column widths for 7. Additional Items to same as Calculated Requirementsm to minimise wordwrap, later changed col-xl from 8 to 7
' (SS,01/11/21) Changes to allow new Extension structure type, which shows an enquiry form and hides other sections
' (SS,18/11/21) Improvements
' (SS,19/11/21) Changed the option from Extension to Residential Extension

Sub ShowPage_calculator

  ' (SS,10/6/20) added calculator spec data
  ' useful help from https://quipblog.com/efficiently-loading-inlined-json-data-911960b0ac0a

%>
<script type="application/json">
<%=CustomGetCalcSpecJSON%>
</script>
<script>
  const jsonNode = document.querySelector("script[type='application/json']");
  const jsonText = jsonNode.textContent;
  const gscJSONStructureTypes = JSON.parse(jsonText); // jsonData renamed to gscJSONStructureTypes
</script>

<script>

var gscStructureType, gscBaseType, gscScrewLength, gscJoistSize;
var gscStructureTypeIndex;
const gscPLEASE_SELECT = 'Please select...';

var gscBypassCalculate = false; // (SS,5/11/20)

// populate combo on page load
$( document ).ready(function() {
  gscPopulateStructureTypeCombo();
  gscPopulateFittingOptionCombo();
});

function itpConsoleLog(AMsg) {
  var today = new Date(); 
  console.log(today.toLocaleTimeString() + ': ' + AMsg);
}

/*
function blink(selector){
 $(selector).fadeOut('slow', function(){
   $(this).fadeIn('slow', function(){
    blink(this);
   });
 });
}
*/

function gscPopulateStructureTypeCombo() { 
  var LText, LValue;
  
  $("#StructureType").empty();
  
   
  // add initial "Please select..."
  $('#StructureType').append( new Option(gscPLEASE_SELECT, '') );
  
  $.each(gscJSONStructureTypes, function(i, el) 
  { 
    LText = el.structureType;
    LValue = LText;
    if (el.includeDeckingArea) LText += ' (including any decking area)';     
    $('#StructureType').append( new Option(LText, LValue) );
  });
  
  // (SS,1/11/21) append special new type called "Extension"
  // (SS,19/11/21) renamed from Extension to Residential Extension
  $('#StructureType').append( new Option("Residential Extension", "Residential Extension") );
  
  // see selected item from query string or first item
  var LSelectedStructureType = '<%=Request.QueryString("structuretype")%>';
  
  if (LSelectedStructureType == '')
    $('#StructureType').prop('selectedIndex', 0);
  else
    $("#StructureType").val(LSelectedStructureType);
  
  // trigger routine that runs on structure type change
  gscStructureTypeChange();
}


// (SS,23/6/20) moved here from gscBaseTypeChange, now back to offering both for SIP as well  
// (SS,24/11/20) renamed from gscPopulateFittingOptionsCombo to gscPopulateFittingOptionCombo, no longer a combo, now a radio
function gscPopulateFittingOptionCombo() {
  var LBaseType = document.getElementById("BaseType").value; 

 // $("#FittingOptions").empty();
  // fitting options, both
 // $("#FittingOptions").prop("disabled", false);
  // var myFittingOptions = [{text: 'Please select...', value: ''}, {text: 'Buy ground screws only', value: 'Buy ground screws only'}, {text: 'Buy ground screws, deck base and fitting', value: 'Buy ground screws, deck base and fitting'}];    
      
 // $('#FittingOptions').append( new Option('Please select...', '') );
  // $('#FittingOptions').append( new Option('Buy ground screws only', 'Buy ground screws only') );
  // (SS,30/6/20) replaced above with following
  //$('#FittingOptions').append( new Option('Buy ground screws, brackets and fixings', 'Buy ground screws, brackets and fixings') );  
  // (SS,16/11/20) renamed to following  
 //  $('#FittingOptions').append( new Option('Buy ground screws, brackets and fixings for self-installation', 'Buy ground screws, brackets and fixings for self-installation') ); 
  
  //if (LBaseType == 'SIP')
  //  $('#FittingOptions').append( new Option('Buy ground screws, SIP base and fitting', 'Buy ground screws, SIP base and fitting') );
  //else
  //  $('#FittingOptions').append( new Option('Buy ground screws, deck base and fitting', 'Buy ground screws, deck base and fitting') );
  
  // (SS,30/6/20) replaced above with following
  //if (LBaseType == 'Joist')
    //$('#FittingOptions').append( new Option('Buy full professional installation', 'Buy full professional installation') );
    // (SS,16/11/20) replaced above with following
    //$('#FittingOptions').append( new Option('Buy professional install by The Ground Screw Centre, includes supply of all ground screws and a timber deck', 'Buy professional install by The Ground Screw Centre, includes supply of all ground screws and a timber deck') );  
   
  // (SS,24/11/20) check and disable the pro option if base type is SIP
  if (LBaseType == 'SIP') {
    document.getElementById("radioFittingOptionPro").checked = false;
    document.getElementById("radioFittingOptionPro").setAttribute("disabled","disabled");
  }
  else
    document.getElementById("radioFittingOptionPro").removeAttribute("disabled");
   
}

function gscStructureTypeChange() {
  gscStructureType = document.getElementById("StructureType").value;
  
  // set the index for selected StructureType, -1 if not found
  gscStructureTypeIndex = gscJSONStructureTypes.findIndex(gscJSONStructureTypes => gscJSONStructureTypes.structureType == gscStructureType);

  // populate the screwlength, basetype and joistsize combos for this structure type
  gscPopuplateCombo("ScrewLength", "screwLengths");
  gscPopuplateCombo("BaseType", "baseTypes");
  gscPopuplateCombo("JoistSize", "joistSizes");
  
  // to ensure correct population of bracket options etc. (also calls gscCalculate)
  gscBaseTypeChange(); 
  
  // gscCalculate();
  
  // (SS,1/11/21)
  if (gscStructureType == 'Residential Extension') {
    $("#base-details").hide();
    $("#additional-loads").hide();
    $("#fitting-option").hide();
    $("#BracketOptions").hide();
    $("#InstallationTool").hide();
    $("#AdditionalItems").hide();
    $("#CalculatedRequirements").hide();
    $("#ExtensionEnquiryButton").show();
    $('#modal-content-extension-enquiry').modal('show');
  }
  else
  {
    $("#base-details").show();
    $("#additional-loads").show();
    $("#fitting-option").show();
    $("#BracketOptions").show();
    $("#InstallationTool").show();
    $("#AdditionalItems").show();    
    $("#CalculatedRequirements").show();
    $("#ExtensionEnquiryButton").hide();
  }
  
}


function gscPopuplateCombo(AType, AArrayName) {
  var LSelect, LArray;
  LSelect = '#' + AType;
  $(LSelect).empty();
  if (gscStructureTypeIndex != -1) {
    var LValue, i, LArray;
    LArray = gscJSONStructureTypes[gscStructureTypeIndex][AArrayName];
    for (i in LArray) {
      LValue = LArray[i];
      $(LSelect).append( new Option(LValue, LValue) );
    }
    if (i > 0) $(LSelect).prepend( new Option(gscPLEASE_SELECT, '') );
  }  
  // select first item
  $(LSelect).prop('selectedIndex', 0);
  
  // disable if only one option
  $(LSelect).prop("disabled", $(LSelect + " option").length <= 1);     
}

function gscScrewLengthChange() {
  gscCalculate();  
}

function gscBaseTypeChange() {
  var bt = document.getElementById("BaseType").value; 
  
  $("#SecuringBrackets").empty();
  
  // limit securing brackets
  if (bt == "SIP") {
    $("#SecuringBrackets").val("SIP Brackets");
    $("#SecuringBrackets").prop("disabled", true);
    var myBrackets = [{text: 'SIP Brackets', value: 'SIP Brackets'}];

    // hide the joist size combo and set to blank
   // $("#JoistSize").val("");
    $("#JoistSizeControl").hide();
        
  }
  else {
    $("#SecuringBrackets").val("");
    $("#SecuringBrackets").prop("disabled", false);
    
    var myBrackets = [{text: 'Please select...', value: ''}, {text: 'Premium Joist Brackets', value: 'Premium Joist Brackets'}, {text : 'Standard Joist Brackets', value: 'Standard Joist Brackets'}];
    
    $("#JoistSizeControl").show();
  }
  
  $.each(myBrackets, function(i, el) 
  { 
     $('#SecuringBrackets').append( new Option(el.text, el.value) );
  });
   
  $('#SecuringBrackets').prop('selectedIndex', 0);
  
  gscPopulateFittingOptionCombo(); // (SS,23/6/20) shows deck base or SIP base depending on base type
  
 
  gscCalculate();  
}

// (SS,23/6/20) new function
function gscFittingOptionChange() {
  
  // var LFittingOptions = gscGetStringValue('FittingOptions');
  // (SS,24/11/20) replaced above with following, changed from combo to radio 
  var LFittingOption = gscGetFittingOption();  
  
  var LBaseType = gscGetStringValue('BaseType');
  
  // (SS,10/5/20) added following to show FittingPriceAlert when fitting chosen
  // later also hides/shows additional items and bracket options
  // (SS,23/6/20) moved here from gscCalculate
  //if (LFittingOptions == 'Buy ground screws, deck base and fitting') {  
  // (SS,30/6/20) replaced fitting with installation
  // (SS,16/11/20) replaced installation with install, then install with professional
  if (LFittingOption.includes('professional')) { 
    $("#FittingPriceAlert").removeClass('d-none');
    $("#InstallInfo").removeClass('d-none'); // (SS,30/6/20) 
    $("#InstallationTool").addClass('d-none'); // (SS,11/11/20)    
    $("#AdditionalItems").addClass('d-none');        
    $("#BracketOptions").addClass('d-none');
    
    if (LBaseType == 'Joist')
      $("#SecuringBrackets").val("Premium Joist Brackets");   
    else if (LBaseType == 'SIP')
      $("#SecuringBrackets").val("SIP Brackets");
    // (SS,6/11/20) choose the largest available screw
    var LLastScrewLength = $('#ScrewLength option:last').val();
    $('#ScrewLength').val(LLastScrewLength);
  }  
  else {
    $("#FittingPriceAlert").addClass('d-none');
    $("#InstallInfo").addClass('d-none'); // (SS,30/6/20) 
    $("#InstallationTool").removeClass('d-none'); // (SS,11/11/20)
    $("#AdditionalItems").removeClass('d-none');
    $("#BracketOptions").removeClass('d-none');
  } 

  gscCalculate();
}

// (SS,24/11/20) returns the option or blank if not selected
function gscGetFittingOption() {
  var LResult = $('input[name="FittingOption"]:checked').val();
  
  if (LResult == undefined) { LResult = "" };
  
  // alert(LResult);
  
  return LResult;
}

// Convert either metres or feet to other dimension
// AValue is value for current input
// ADimension is either "m" or "ft" to set metres or feet
// AInputToSet is where the calculated value will go
function gscSetOtherDimension(AValue, ADimensions, AInputToSet) {
  var LNewValue;
  var LInput = document.getElementById(AInputToSet);
  
  // if valid floating point number then calculate, else set to blank
  if (parseFloat(AValue) == AValue) {
    // convert feet to metres
    if (ADimensions == 'm')
      LNewValue = AValue * 12 * 2.54 / 100;
    else // else metres to feet
      LNewValue = AValue * 100.0 / 2.54 / 12; 
  }
  else
    LNewValue = '';

  // if blank then set to blank, else set rounded value
  // typeof used because == will convert '' to 0, or 0 to ''
  if (typeof AValue == 'string' && AValue == '')
    LInput.value = '';
  else
    LInput.value = Math.round(LNewValue * 100) / 100; // set value, round to 2 dp  
    
  gscCalculate();  
}

// returns value from given input id, 0 is return if value isn't valid float
function gscGetNumericValue(AID) {
  var LValue = document.getElementById(AID).value;
  if (parseFloat(LValue) == LValue)
    return LValue
  else
    return 0;
}

function gscGetStringValue(AID) {
  var LValue = document.getElementById(AID).value;
  return LValue;
}

function gscGetCheckboxChecked(AID) {
  return document.getElementById(AID).checked;
}

function gscSetErrorMessage(AMessage) {
  document.getElementById('gsc-error-message').innerHTML = AMessage;
  // blink the error message
  // uses /common/javascript/jquery.blink/jquery.blink.js
  //if (AMessage != '') $("#gsc-error-message").blink({maxBlinks: 3, blinkPeriod: 250}); 
  //if (AMessage != '') blink("#gsc-error-message"); 
}

// (SS,14/10/20) added  ASendEmail = false default parameter
// (SS,13/11/20) added AEmailRequest = false
// (SS,2/11/21) added AExtensionEnquiry = false
function gscCalculate( ASendEmail = false, AEmailRequest = false, AExtensionEnquiry = false ) {

  // (SS,5/11/20) exit if gscBypassCalculate is true, used by gscOnLoad to prevent lots of unnecessary ajax calls
  if (gscBypassCalculate) return;
      
  var LStructureType = gscGetStringValue('StructureType');
  var LBaseType = gscGetStringValue('BaseType');
  var LScrewLength = gscGetStringValue('ScrewLength');
  var LJoistSize = gscGetStringValue('JoistSize'); 
  var LSecuringBrackets = gscGetStringValue('SecuringBrackets');
  // var LFittingOptions = gscGetStringValue('FittingOptions');   
  var LFittingOption = gscGetFittingOption();
  var LAdditionalLoads = gscGetStringValue('AdditionalLoads'); // (SS,26/5/20)
  
  var LLength = gscGetNumericValue('mLength'); 
  var LWidth = gscGetNumericValue('mWidth'); 
      
  itpConsoleLog("gscCalculate");
  
  // (SS,11/11/20) get value from radio control
  var LToolType = $('input[name=ToolType]:checked').val();    
  
  // itpConsoleLog("ToolType: " + LToolType); // ***
 
  var LError = true;
  var LErrorMsg = '';  
  
  if (LStructureType == '')
    LErrorMsg = 'Please select Structure Type' 
  else if (LBaseType == '')
    LErrorMsg = 'Please select Base Type'
  else if (LBaseType == 'Joist' && LJoistSize == '')
    LErrorMsg = 'Please select Joist Size'
  else if (LLength == 0)
    LErrorMsg = 'Please enter Length'
  else if (LWidth == 0)
    LErrorMsg = 'Please enter Width'    
  // (SS,11/5/20) adjusted limit from 8.54 to 500 (due to decking)
  else if (LLength < 1.22 || LLength > 500) 
    LErrorMsg = 'Length must be between 1.22 and 500 metres'
  else if (LWidth < 1.22 || LWidth > 500) 
    LErrorMsg = 'Width must be between 1.22 and 500 metres'
  else if (LAdditionalLoads == '')
    LErrorMsg = 'Please select Additional Loads'
  else if (LFittingOption == '')
    LErrorMsg = 'Please select Fitting Option'
  else if (LScrewLength == '')
    LErrorMsg = 'Please select Screw Length'
  else if (LSecuringBrackets == '')
    LErrorMsg = 'Please select Securing Brackets'
  else {
    LError = false;
  }
  
  
  // (SS,13/11/20) if bracket is premimum then hide products 26 (Impact Hex Nut Driver 8mm), 25 (100 x Carbon steel TEK Screws)
  if (LSecuringBrackets != '') {
    var LIsPremium = LSecuringBrackets == 'Premium Joist Brackets';
    $('input[type=checkbox]').each(function () {
      //$(this).attr('id') + "=" + (this.checked ? $(this).val() : "false");
      //$(this).attr('id').prop( "checked", true );
      if (LIsPremium ) {
        if ($(this).val() == 26 || $(this).val() == 25) {
          $(this).prop( "checked", false );
          $(this).parent().hide();
        }
      }
      else {
        $(this).parent().show();
      }
    });
  }    
  
  // (SS,9/11/20) save the settings using Ajax
  
  
  // if error, i.e. missing values, then blank the info, else fetch the info
  gscSetErrorMessage(LErrorMsg); // either clear or set the error text
  if (LError) {        
    document.getElementById('ajax-info').innerHTML = '';
  }
  
  // (SS,9/11/20) removed else, now does a call even when there's an error, addedl Error= parameter
  
  itpConsoleLog('gscCalculate before ajax');
  // (SS,26/5/20) added AdditionalLoad
  // (SS,9/11/20) added Error
  // (SS,11/11/20) added ToolType
  var LURL = 'ajax.asp?cmd=custom&options=calculator&StructureType=' + LStructureType + '&BaseType=' + LBaseType + '&ScrewLength=' + LScrewLength + '&Length=' + LLength.toString() + '&Width=' + LWidth.toString() + '&JoistSize=' + LJoistSize.toString() + '&SecuringBrackets=' + LSecuringBrackets.toString() + '&FittingOption=' + LFittingOption.toString() + '&AdditionalLoads=' + LAdditionalLoads.toString() + '&ToolType=' + LToolType + '&Error=' + LError.toString();
    
  if (ASendEmail) {
    // select the form, because two forms will have email and message
    var LFormName = AEmailRequest ? 'frmEmailRequest' : 'frmEmailCalculation';
    
    var LEmail = $("#" + LFormName + " #email").val();
    var LMessage = $("#" + LFormName + " #message").val();
    
    // LURL = LURL + '&sendemail=yes&email=' + document.getElementById('email').value + '&message=' + document.getElementById('message').value;
    LURL = LURL + '&sendemail=yes&email=' + LEmail + '&message=' + LMessage;

    if (AEmailRequest) {
     // LURL = LURL + '&request=yes&name=' + document.getElementById('name').value + '&phone=' + document.getElementById('phone').value;
      var LName = $("#" + LFormName + " #name").val();
      var LPhone = $("#" + LFormName + " #phone").val();
      LURL = LURL + '&request=yes&name=' + LName + '&phone=' + LPhone;
    }
  }
  // (SS,2/11/21)
  else if (AExtensionEnquiry) {
  
    var LFormName = 'frmEmailExtensionEnquiry';
    
    var LEmail = $("#" + LFormName + " #email").val();
    var LMessage = $("#" + LFormName + " #message").val();
    var LName = $("#" + LFormName + " #name").val();
    var LPhone = $("#" + LFormName + " #phone").val();
    var LPostcode = $("#" + LFormName + " #postcode").val();  
    LURL = LURL + '&extensionenquiry=yes&Email=' + LEmail + '&type=Residential Extension Enquiry' + '&Message=' + LMessage + '&Name=' + LName + '&Telephone=' + LPhone + '&postcode=' + LPostcode;      
    
  }
    
  
  itpConsoleLog(LURL);
  
  // (SS,26/5/20) add list of ticked additional items
  var LProductList = "";
  $('input[type=checkbox]').each(function () {
    LProductList += "&" + $(this).attr('id') + "=" + (this.checked ? $(this).val() : "false");
  });
  console.log (LProductList);    
  
  
  LURL = LURL + LProductList;
  
    
  $.get(LURL,
    function(data) {
      
      // (SS,12/11/21) added if/else to use different element for Extension Enquiry
      if (AExtensionEnquiry) {
        $('#ExtensionEnquiry').show();
        $("#ajax-info-ee").html(data);
        $("#ExtensionEnquiryButton").hide();        
      }            
      else {
        $('#ExtensionEnquiry').hide(); // not applicable here
        // (SS,12/11/21) following as before
        $("#ajax-info").html(data);      
      }
      
      itpConsoleLog('gscCalculate ajax call back');
    }
  );
  itpConsoleLog('gscCalculate after ajax');
  
  
  // (SS,28/5/20)  
  gscUpdateBracketImage(LBaseType, LJoistSize, LSecuringBrackets);
 
}

// (SS,28/5/20) show appropriate bracket image or hide
function gscUpdateBracketImage(ABaseType, AJoistSize, ASecuringBrackets) {
  var LImageName = '';
  
  if (ABaseType == 'SIP')
    LImageName = 'sips-panel-support-bracket';
  else if (ABaseType == 'Joist') {
    if (AJoistSize != '' && ASecuringBrackets != '') {
      if (ASecuringBrackets == 'Premium Joist Brackets')
        LImageName = 'premium-bracket-system';
      else
        LImageName = 'standard-bracket-system';
      LImageName = LImageName + '-for-';
      if (AJoistSize == '3" x 2"')
        LImageName = LImageName + '3-x-2-joists'
      // (SS,16/11/20) replaced '4" x 2" or 6" x 2"' with 4", 5", 6" x 2"
      // (SS,26/11/20) replaced '4-x-2-or-6-x-2-joists with 4-x-2-5-x-2-6-x-2 for image name
      // (SS,8/4/22) replaced '4", 5", 6" x 2"' with '4", 5" or 6" x 2"'
      else if (AJoistSize == '4", 5" or 6" x 2"')      
        LImageName = LImageName + '4-x-2-5-x-2-6-x-2-joists'
      else
        LImageName = '';    
    }
  }
  
  if (LImageName != '') {
    $("#BracketImage").removeClass('d-none');
     LImageName = 'img/p/' + LImageName + '-160w.jpg';
  }
  else
    $("#BracketImage").addClass('d-none');
  
  $("#BracketImage").attr("src", LImageName);
}

function gscAddToBasket() {   
  
  itpConsoleLog('gscAddToBasket Start');
  
  $.post('ajax.asp?cmd=custom&options=addtobasket', 
    $('form[name="frmGroundScrewCalculator"]').serialize(),
    function(data) {
      itpConsoleLog('call back from addtobasket');
      window.location.href = 'products.asp?cmd=basket';
    }
  );
  
  itpConsoleLog('gscAddToBasket End');
    
}

// (SS,5/11/2) run on load, use to restore a calculation
function gscOnLoad() {

<%
  ' (SS,5/11/2) restore a calculation if applicable
  CustomCalculationDoRestore
%>

  //console.log('1');  
  
  // only run the following if the variable LStructureType is defined, by the CustomCalculationDoRestore routine
  if (typeof LStructureType !== 'undefined') {
  
    gscBypassCalculate = true;
     
    $("#StructureType").val(LStructureType);
    $("#StructureType").change();
    $("#BaseType").val(LBaseType);
    $("#BaseType").change();
    $("#JoistSize").val(LJoistSize);
    $("#JoistSize").change();  

    $("#mLength").val(LLength);
    $("#mWidth").val(LWidth);
    $("#mLength").keyup();
    $("#mWidth").keyup();
    
    $("#AdditionalLoads").val(LAdditionalLoads);
    $("#AdditionalLoads").change();

    //$("#FittingOptions").val(LFittingOptions);
    //$("#FittingOptions").change();
    // (SS,24/11/20) replaced above with following
    $("input[name='FittingOption'][value='" + LFittingOption + "']").prop('checked', true);      
    gscFittingOptionChange();
    
    $("#ScrewLength").val(LScrewLength);
    $("#ScrewLength").change();

    $("#SecuringBrackets").val(LSecuringBrackets);
    $("#SecuringBrackets").change(); 


    $("input[name='ToolType'][value='" + LToolType + "']").prop('checked', true);    

    var arrayLength = LAdditionalItems.length;
    for (var i = 0; i < arrayLength; i++) {
      //console.log(LAdditionalItems[i]);
      
      $('input[type=checkbox][value=' + LAdditionalItems[i] + ']').prop('checked', true);
    }
    
    gscBypassCalculate = false;
  }

  gscCalculate();
}

window.onload = gscOnLoad; // to ensure it's run when back button is pressed (5/11/20) changed from gscCalculate to gscOnLoad

</script>

<%




  Dim LErrorMessage
  LErrorMessage = ""
  
  ShowPageTitle "calculator", "Ground Screw Calculator", "" ' (SS,5/10/20) added 2 new parameter
  
  ' (SS,26/5/20) moved Base Type (Joist / SIP) from "1. Enter Structure Details" to "2. Enter Base Dimensions" which was renamed to "2. Enter Base Details".
  ' renamed 3. Additional Options to 3. Bracket Options
  ' added (including decking area) for each structure type except decking
  ' added section 4. Additional Loads
  
  ' (SS,3/6/20) adjusted structure types to following
  ' Garden Gym (including decking area)
  ' Garden Studio (including decking area)
  ' Garden Office (including decking area)
  ' Garden Summerhouse (including decking area)
  ' Log Cabin (including decking area)
  ' Work Shop
  ' Shed
  ' Decking  
  
%>
<div>
<h2>Calculate your ground screw requirement</h2>
</div>

<div id="other-pages2">  
        
<form action="" method="post" name="gscCalculator">
        

<div class="row">

  <div class="col-12 col-md-9 col-lg-7 col-xl-6">

    <div class="card mt-3">
    
      <h5 class="card-header">1. Enter Structure Details</h5>
      
      <div class="card-body">
      
        <div style="margin-bottom:10px">
          <label for="StructureType">Structure Type</label>  
          <select class="form-control" name="StructureType" id="StructureType" onchange="gscStructureTypeChange()">
            <option value="">Please select...</option>     
          </select>
        </div>               
        
      </div>
      
    </div> 
  
  </div>
  
</div> <!-- row -->
   
<div id="base-details" class="row">    

  <div class="col-12 col-md-9 col-lg-7 col-xl-6">       
      
   <div class="card mt-3">
    
      <h5 class="card-header">2. Enter Base Details</h5>
      
      <div class="card-body">
      
        <div style="margin-bottom:10px">
          <label for="BaseType">Base Type</label>  
          <select class="form-control" name="BaseType" id="BaseType" onchange="gscBaseTypeChange()">
            <option value="">Please select...</option>
          </select>
        </div>

        <div style="margin-bottom:10px" id="JoistSizeControl">
          <label for="JoistSize">Joist Size</label>  
          <select class="form-control" name="JoistSize" id="JoistSize" onchange="gscCalculate()">
            <option value="">Please select...</option>
          </select>
        </div>      
      
        <div class="card-title">  
          <h5>Dimensions in Metres (m) or Feet (ft)</h5>
        </div>
      
        <div class="gsc-content-col">
          <div class="form-group">
            <label for="mLength">Length (m)</label>
            <input type="text" class="form-control" name="mLength" id="mLength" size="10" maxlength="20" onkeyup="gscSetOtherDimension(this.value, 'ft', 'ftLength')" placeholder="Length (m)" /> 
          </div>
            
          <div class="form-group">
            <label for="mWidth">Width (m)</label>
            <input type="text" class="form-control" name="mWidth" id="mWidth" size="10" maxlength="20" onkeyup="gscSetOtherDimension(this.value, 'ft', 'ftWidth')" placeholder="Width (m)" />
          </div>
        </div>
        
        <div class="gsc-content-col">      
          <div class="form-group">
            <label for="ftLength">Length (ft)</label><br />
            <input type="text" class="form-control" name="ftLength" id="ftLength" size="10" maxlength="20" onkeyup="gscSetOtherDimension(this.value, 'm', 'mLength')" placeholder="Length (ft)" />
          </div>

          <div class="form-group">
            <label for="ftWidth">Width (ft)</label><br />
            <input type="text" class="form-control" name="ftWidth" id="ftWidth" size="10" maxlength="20" onkeyup="gscSetOtherDimension(this.value, 'm', 'mWidth')" placeholder="Width (ft)" />
          </div>
        </div>
     
      </div>
      
    </div>  

  </div>

</div> <!-- row -->

<div id="additional-loads" class="row">

  <div class="col-12 col-md-9 col-lg-7 col-xl-6">   

    <div class="card mt-3">
    
      <h5 class="card-header">3. Additional Loads</h5>
      <div class="card-body">
      
        <div style="margin-bottom:10px">
          <label for="AdditionalLoads">Heavy Items to Support
          <small class="form-text text-muted">e.g. hot tubs, pool table, bi-fold doors and gym equipment etc.</small>
          </label>
          <select class="form-control" name="AdditionalLoads" id="AdditionalLoads" onchange="gscCalculate()">
            <option value="">Please select...</option>
            <option value="None">None</option>
            <option value="Up to 1000 kg">Up to 1000 kg</option>
            <option value="1001 kg to 1500 kg">1001 kg to 1500 kg</option>
            <option value="1501 kg to 2000 kg">1501 kg to 2000 kg</option>
            <option value="2001 kg to 2500 kg">2001 kg to 2500 kg</option>
            <option value="2501 kg to 3000 kg">2501 kg to 3000 kg</option>
          </select>
        </div>      

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

</div> <!-- row --> 

<div id="fitting-option" class="row">

  <div class="col-12 col-md-9 col-lg-7 col-xl-6">   

    <div class="card mt-3">
    
      <h5 class="card-header">4. Fitting Option</h5>
      
      <div class="card-body">

        <div class="custom-control custom-radio">
          <input type="radio" id="radioFittingOptionSelf" name="FittingOption" value="Buy ground screws, brackets and fixings for self-installation" class="custom-control-input" onClick="gscFittingOptionChange()">
          <label class="custom-control-label" for="radioFittingOptionSelf">Buy ground screws, brackets and fixings for self-installation</label>
        </div>
        
        <div class="custom-control custom-radio">
          <input type="radio" id="radioFittingOptionPro" name="FittingOption" value="Buy professional install by The Ground Screw Centre, includes supply of all ground screws and timber joist frame" class="custom-control-input" onClick="gscFittingOptionChange()">
          <label class="custom-control-label" for="radioFittingOptionPro">Buy professional install by The Ground Screw Centre, includes supply of all ground screws and timber joist frame</label>
        </div>        
        
        <div class="alert alert-info d-none mt-1 mb-0" role="alert" id="FittingPriceAlert">
          The fitting price is based on a 150 mile radius of CV8 2LG
        </div>

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

</div> <!-- row -->

<div class="row d-none" id="BracketOptions">

  <div class="col-12 col-md-9 col-lg-7 col-xl-6">   

    <div class="card mt-3">
    
      <h5 class="card-header">5. Screw &amp; Bracket Options</h5>
      
      <div class="card-body">
              
        <div style="margin-bottom:10px">
          <label for="ScrewLength">Screw Length</label>  
          <select class="form-control" name="ScrewLength" id="ScrewLength" onchange="gscScrewLengthChange()">
            <option value="0">Please select...</option>   
          </select>
        </div>             
      
        <div style="margin-bottom:10px">
          <label for="SecuringBrackets">Securing Brackets</label>  
          <select class="form-control" name="SecuringBrackets" id="SecuringBrackets" onchange="gscCalculate()">
            <option value="">Please select...</option>
          </select>
        </div> 

        <img class="d-none mx-auto d-block" id="BracketImage" src="">
                
      </div>
      
    </div> 
    
  </div>

</div> <!-- row --> 

<div class="row d-none" id="InstallationTool">

  <div class="col-12 col-md-9 col-lg-7 col-xl-6">   

    <div class="card mt-3">
    
      <h5 class="card-header">6. Installation Tool</h5>
      
      <div class="card-body">
<%
      ' (SS,11/11/20)
      gscAddToolRadioItem 1, False, "", "", "No Installation Tool Required"
      gscAddToolRadioItem 2, True, "GS-INSTOOL", "Manual", "Purchase - Manual Installation Tool"
      gscAddToolRadioItem 3, False, "GS-PROTOOL", "Professional", "Purchase - Professional Installation Tool"
      gscAddToolRadioItem 4, False, "GS-PROTOOLREN", "Rental", "Rent - Professional Installation Tool"
%>

      <div class="alert alert-info d-none mt-1 mb-0" role="alert" id="ProfessionalToolAlert">
        Due to the number of ground screws required we would recommend the use of our professional ratchet install tool for a quicker and easier install
      </div>

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

</div> <!-- row --> 

<div class="row d-none" id="AdditionalItems">

  <div class="col-12 col-md-9 col-lg-9 col-xl-7">   

    <div class="card mt-3">
    
      <h5 class="card-header">7. Additional Items</h5>
      
      <div class="card-body">
      <%
        ' (SS,26/5/20)
        Dim LProductID, LProductCode, LProductName, i, LCheckboxName
        
        i = 1
        Do
          LProductID = CustomGSCGetProductID(PT_ACCESSORY, "", "", "", "", "", "", i)
          If LProductID <> "" Then            
            LProductCode = GetProductCodeForProductID(LProductID)
            LProductName = GetProductName(LProductCode) & " &nbsp;(" & GetProductPriceForProductID(LProductID, False, True) & ")"
            LCheckboxName = ADDITIONAL_ITEM_NAME & i ' (SS,4/11/20) replaced "product" with ADDITIONAL_ITEM_NAME
          %>
        <div style="margin-bottom:10px">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="<%=LProductID%>" name="<%=LCheckboxName%>" id="<%=LCheckboxName%>" onClick="gscCalculate()">
            <label class="form-check-label" for="<%=LCheckboxName%>">
              <%=LProductName%>
            </label>
          </div>
        </div>
          <%
          End If
          i = i + 1
        Loop Until LProductID = ""
        
      %>

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

</div> <!-- row --> 


</form> <!-- first form ends here to prevent ajax form from being embedded inside this form and not working -->
 
<div class="row" id="CalculatedRequirements">

  <div class="col-12 col-md-9 col-lg-9 col-xl-8">   
   
    <div class="card my-3">

      <h5 class="card-header">Your Calculated Requirements</h5>

      <div class="card-body">    
        
        <div id="gsc-error-message"></div>
        
        <div id="ajax-info" class="gs-info" style="margin-top: 5px; margin-bottom: 10px">
        </div>
              
      </div>
      
    </div>

  </div>  

</div> <!-- row -->

<div class="row" id="ExtensionEnquiry">
  <div class="col-12 col-md-9 col-lg-9 col-xl-8">  

    <div id="ajax-info-ee" class="gs-info" style="margin-top: 5px; margin-bottom: 10px">
    </div>
  
  </div>  
</div> <!-- row -->

<div class="row" id="ExtensionEnquiryButton">
  <div class="col-12 col-md-9 col-lg-9 col-xl-8">  
    <div style="margin-top: 10px">
      <button class="btn btn-success" onClick="$('#modal-content-extension-enquiry').modal('show');">Enquiry</button>
    </div>  
  </div>  
</div> <!-- row -->


<div class="gsc-calc-info">
<%=GetPageContent("GSCalculator", "")%>
</div>

<div class="collapse" id="collapseInstallInfo">
<%
' (SS,2/11/20)
  'GetWebText("installationinfo")
  Dim LPageContent, LPageHeading
  LPageContent = GetPageContent("installationinfo", LPageHeading)
  Response.Write "<h1>" & LPageHeading & "</h1>" & NL
  Response.Write LPageContent
%>
</div>

</div> <!-- end #other-pages2 -->


<%
  ' (SS,14/10/20) show the email calculation modal
  gscShowCalculationEmailModal
  
  ' (SS,12/11/20) different modal for request
  gscShowRequestDetailsEmailModal
  
  ' (SS,1/11/21) different modal for extension enquiry
  gscShowExtensionEnquiryEmailModal

End Sub ' ShowPage_calculator

' (SS,11/11/20)
Sub gscAddToolRadioItem(ANo, AChecked, AProductCode, AValue, ADesc)
  Dim LChecked, LDesc
  If AChecked Then
    LChecked = " checked"
  Else
    LChecked = ""
  End If

  LDesc = ADesc
  If AProductCode <> "" Then
    Dim LProductID, LPrice
    LProductID = GetProductIDForProductCode(AProductCode)    
    
    ' (SS,18/11/20) for rental tool, the price text is taken from a token
    If AProductCode = "GS-PROTOOLREN" Then
      LPrice = GetTokenText("Rental Tool Price")
    Else
      LPrice = GetProductPriceForProductID(LProductID, False, True) ' False for inc VAT, True for currency symbol
    End If
    
    ' LDesc = LDesc & "<small> &nbsp;<a href=""" & GetFullProductLink(AProductCode) & """>(info)</a></small>"
    ' (SS,16/11/20) replaced above with following to remove info link and price
    LDesc = LDesc & " &nbsp;(" & LPrice & ")"
  End If
  
%>
        <div class="custom-control custom-radio">
          <input type="radio" id="customRadio<%=ANo%>" name="ToolType" value="<%=AValue%>"<%=LChecked%> class="custom-control-input" onClick="gscCalculate()">
          <label class="custom-control-label" for="customRadio<%=ANo%>"><%=LDesc%></label>
        </div>
<%        
End Sub        

' (SS,20/2/15) shows the modal popup when Email Calculation button clicked
' (SS,14/10/20) based on basket email modal (i.e. Sub ShowBasketEmailModal in inc-template-basket.asp)
Sub gscShowCalculationEmailModal
%>
  <div class="modal fade" id="modal-content-email-calculation" tabindex="-1" role="dialog" aria-labelledby="emailCalculationModalLabel" aria-hidden="true">  
    <div class="modal-dialog">
      <div class="modal-content" role="document">
        <div class="modal-header">
          <h5 class="modal-title" id="emailBasketModalLabel">Email Calculation</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form name="frmEmailCalculation" id="frmEmailCalculation" method="post" action="">                                                                
        <input type="hidden" name="type" value="calculation">
        <div class="modal-body">  
          <p>Enter your email address below and click "Send" to have the calculation emailed to you.</p>
          <div class="form-group"><label>Email</label><input class="form-control email" placeholder="Enter email address here" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user@gmail.com)" type="email" required="required" name="email" id="email" autofocus ></div>
          <div class="form-group"><label>Message (optional)</label><textarea class="form-control" placeholder="Enter a message here for your own reference (optional)" data-placement="top" data-trigger="manual" type="text" name="message" id="message" rows="3"></textarea></div>           
        </div>
        <div class="modal-footer">
          <div class="form-group">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>            
            <button type="button" class="btn btn-success" data-dismiss="modal" onClick="gscCalculate(true)">Send</button> 
          </div>
        </div>
        </form>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
<%
End Sub

' (SS,12/11/20) similar to Sub gscShowCalculationEmailModal above but for request 
Sub gscShowRequestDetailsEmailModal
%>
  <div class="modal fade" id="modal-content-email-request" tabindex="-1" role="dialog" aria-labelledby="emailRequestModalLabel" aria-hidden="true">  
    <div class="modal-dialog">
      <div class="modal-content" role="document">
        <div class="modal-header">
          <h5 class="modal-title" id="emailBasketModalLabel">Request Details &amp; Availability</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form name="frmEmailRequest" id="frmEmailRequest" method="post" action="">
        <input type="hidden" name="type" value="request">
        <div class="modal-body">  
          <p>Enter your contact details below. Click "Send" to request details and availability.</p>
          <div class="form-group"><label>Email</label><input class="form-control email" placeholder="Enter email address here" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user@gmail.com)" type="email" required="required" name="email" id="email" autofocus ></div>
          <div class="form-group"><label>Name</label><input class="form-control" placeholder="Enter full name here" data-placement="top" data-trigger="manual" type="text" name="name" id="name"></div>
          <div class="form-group"><label>Phone</label><input class="form-control" placeholder="Enter phone number" data-placement="top" data-trigger="manual" type="text" name="phone" id="phone"></div>
          <div class="form-group"><label>Message (optional)</label><textarea class="form-control" placeholder="Enter a message here for your own reference (optional)" data-placement="top" data-trigger="manual" type="text" name="message" id="message" rows="3"></textarea></div>
        </div>
        <div class="modal-footer">
          <div class="form-group">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>            
            <button type="button" class="btn btn-success" data-dismiss="modal" onClick="gscCalculate(true, true)">Send</button> 
          </div>
        </div>
        </form>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
<%
End Sub


' (SS,1/11/21) similar to Sub gscShowRequestDetailsEmailModal above but for extension enquiry
Sub gscShowExtensionEnquiryEmailModal
%>
  <div class="modal fade" id="modal-content-extension-enquiry" tabindex="-1" role="dialog" aria-labelledby="emailRequestModalLabel" aria-hidden="true">  
    <div class="modal-dialog">
      <div class="modal-content" role="document">
        <div class="modal-header">
          <h5 class="modal-title" id="emailBasketModalLabel">Residential Extension Enquiry</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form name="frmEmailExtensionEnquiry" id="frmEmailExtensionEnquiry" method="post" action="">
        <input type="hidden" name="type" value="request">
        <div class="modal-body">  
<p>
We offer bespoke ground screw foundation solutions for residential extensions, working in partnership with a national building control practice who understand our products and load testing procedures. 
</p>
<p>
We have an extensive range of over 60 different ground screws to meet all domestic and commercial requirements. 
</p>
<p>
For further details please complete the form below and we will get in touch within 48 hours.
</p>
          <div class="form-group"><label>Email</label><input class="form-control email" placeholder="Enter email address" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user@gmail.com)" type="email" name="email" id="email" autofocus required></div>        
          <div class="form-group"><label>Name</label><input class="form-control" placeholder="Enter full name" data-placement="top" data-trigger="manual" type="text" name="name" id="name" required></div>
          <div class="form-group"><label>Phone</label><input class="form-control" placeholder="Enter phone number" data-placement="top" data-trigger="manual" type="text" name="phone" id="phone" required></div>
          <div class="form-group"><label>Postcode</label><input class="form-control" placeholder="Enter postcode" data-placement="top" data-trigger="manual" type="text" name="postcode" id="postcode" required></div>
          <div class="form-group"><label>Message</label><textarea class="form-control" placeholder="Enter your message" data-placement="top" data-trigger="manual" type="text" name="message" id="message" rows="3" required></textarea></div>
        </div>
        <div class="modal-footer">
          <div class="form-group">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>            
            <button type="submit" class="btn btn-success" onClick="">Send</button>
          </div>
        </div>
        </form>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  
<script>
  // (SS,18/11/21) following allows html 5 validation to function within modal and submit via ajax
  $('#frmEmailExtensionEnquiry').on('submit', function(e) {
    $('#modal-content-extension-enquiry').modal('hide'); // close the modal
    e.preventDefault(); //this prevents the normal submit processed by the browser
    // submit form via ajax
    gscCalculate(false, false, true);
  });  
</script>

  
<%
End Sub


%>