let base = [
  {'Appraisal Type':'Full',Costs:[
    {'Property Type': 'SFR/PUD',Cost: 499},
    {'Property Type': 'Condo/Townhouse',Cost: 499},
    {'Property Type': '2-4 Units',Cost: 749},
    {'Property Type': 'Apartment',Cost: 1699},
    {'Property Type': 'Vacant Land',Cost: 599}
  ]},
  {'Appraisal Type':'Drive',Costs:[
    {'Property Type': 'SFR/PUD',Cost: 399},
    {'Property Type': 'Condo/Townhouse',Cost: 399},
    {'Property Type': '2-4 Units',Cost: 649},
    {'Property Type': 'Apartment',Cost: 1599},
    {'Property Type': 'Vacant Land',Cost: 599}
  ]},
  {'Appraisal Type':'Desktop',Costs:[
    {'Property Type': 'SFR/PUD',Cost: 349},
    {'Property Type': 'Condo/Townhouse',Cost: 349},
    {'Property Type': '2-4 Units',Cost: 549},
    {'Property Type': 'Apartment',Cost: 1599},
    {'Property Type': 'Vacant Land',Cost: 499}
  ]}
]

let locationArr = [
  {'Location':'LA',Cost:0},
  {'Location':'orange',Cost:150},
  {'Location':'ventura',Cost:150},
  {'Location':'riverside',Cost:200},
  {'Location':'bernardino',Cost:200},
]

let spFeatures = [
  {feature:'Brand New Construction', Cost: 100},
  {feature:'Assessory Dwelling Unit (ADU)', Cost: 150},
  {feature:'Views', Cost: 100},
  {feature:'Water Front', Cost: 150},
  {feature:'Finished Basement', Cost: 150}
]

let nbTopography = [
  {topography: 'Predominately Flat', Cost: 0},
  {topography: 'Hillside', Cost: 100}
]

let turnTime = [
  {time: 'Standard Turn Around', Cost: 0},
  {time: 'Rush Service', Cost: 100},
  {time: 'Super Rush', Cost: 200}
]

let appraisalType = 'Full' //default
let propertyType = 'SFR/PUD' //default
let selectedLocation = 'LA' //default
let selectedTopography = 'Predominately Flat' //default
let selectedTime = 'Standard Turn Around' //default
let basePrice = 0 //factored by appraisal type and property type
let additionalPrice = 0
let locationPrice = 0
let totalPrice = 0
let topographyPrice = 0
let timePrice = 0
let brandNewConstPrice = 0
let ADUPrice = 0
let viewPrice = 0
let frontPrice = 0
let basementPrice = 0
let livingAreaPrice = 0
let lotSizePrice = 0
let livingArea = 0
let lotSize = 0
let totalOrderPrice = 0
let discountPrice = 0
let totalDiscount = 0
let discountType = ''

const queryString = window.location.search
const urlParams = new URLSearchParams(queryString);

$('#myRange').val(0)
$('#lotRange').val(0)

document.getElementById("myRange").type="range";
var slider = document.getElementById("myRange");
slider.min = 0;
slider.max = 15000;

document.getElementById("lotRange").type="range";
var slider2 = document.getElementById("lotRange");
slider2.min = 0;
slider2.max = 150000;

console.log(queryString)
if(queryString){
  appraisalType = urlParams.get('appraisalType');
  propertyType = urlParams.get('propertyType'); 
  selectedLocation = urlParams.get('selectedLocation'); 
  selectedTopography = urlParams.get('selectedTopography'); 
  selectedTime = urlParams.get('selectedTime'); 
  basePrice = urlParams.get('basePrice'); 
  additionalPrice = urlParams.get('additionalPrice'); 
  locationPrice = urlParams.get('locationPrice'); 
  totalPrice = urlParams.get('totalPrice'); 
  topographyPrice = urlParams.get('topographyPrice'); 
  timePrice = urlParams.get('timePrice'); 
  brandNewConstPrice = urlParams.get('brandNewConstPrice'); 
  ADUPrice = urlParams.get('ADUPrice'); 
  viewPrice = urlParams.get('viewPrice'); 
  frontPrice = urlParams.get('frontPrice'); 
  livingAreaPrice = urlParams.get('livingAreaPrice'); 
  lotSizePrice = urlParams.get('lotSizePrice'); 
  livingArea = urlParams.get('livingArea'); 
  lotSize = urlParams.get('lotSize'); 
  basementPrice = urlParams.get('basementPrice')

  if(brandNewConstPrice > 0){
    $('[data-sf="Brand New Construction"]').siblings('.w-checkbox-input').addClass('w--redirected-checked')
    $('[data-sf="Brand New Construction"]').prop('checked',true)
  }
  if(ADUPrice > 0){
    console.log('clicking ADU')
    $('[data-sf="Assessory Dwelling Unit (ADU)"]').siblings('.w-checkbox-input').addClass('w--redirected-checked')
    $('[data-sf="Assessory Dwelling Unit (ADU)"]').prop('checked',true)
  }
  if(viewPrice > 0){
    $('[data-sf="Views"]').siblings('.w-checkbox-input').addClass('w--redirected-checked')
    $('[data-sf="Views"]').prop('checked',true)
  }
  if(frontPrice > 0){
    $('[data-sf="Water Front"]').siblings('.w-checkbox-input').addClass('w--redirected-checked')
    $('[data-sf="Water Front"]').prop('checked',true)
  }
  if(basementPrice > 0){
    $('[data-sf="Finished Basement"]').siblings('.w-checkbox-input').addClass('w--redirected-checked')
    $('[data-sf="Finished Basement"]').prop('checked',true)
  }

  $('#livingArea').val(livingArea)
  $('#lotSize').val(lotSize)
  $('#myRange').val(livingArea)
  $('#lotRange').val(lotSize)

  console.log(livingArea,lotSize)
}

$(`[data-appraisal-type="${appraisalType}"]`).prop('checked',true)
$(`[data-property-type="${propertyType}"]`).prop('checked',true)
$(`[data-location="${selectedLocation}"]`).prop('checked',true)
$(`[data-topography="${selectedTopography}"]`).prop('checked',true)
$(`[data-time="${selectedTime}"]`).prop('checked',true)
$('#invalidCoupon').hide()

function updatePrice(){
  appraisalType = $('[data-appraisal-type]:checked').data('appraisal-type')
  propertyType = $('[data-property-type]:checked').data('property-type')
  selectedLocation = $('[data-location]:checked').data('location')
  selectedTopography = $('[data-topography]:checked').data('topography')
  selectedTime = $('[data-time]:checked').data('time')
  livingArea = $('#myRange').val()
  lotSize = $('#lotRange').val()
  console.log(livingArea,lotSize)

  basePrice = base.filter(x =>  x['Appraisal Type'].includes(appraisalType))[0].Costs.filter(y => y['Property Type'].includes(propertyType))[0].Cost

  //additional price start
  locationPrice = appraisalType === 'Desktop' ? 0 : locationArr.filter(x => x['Location'].includes(selectedLocation))[0].Cost
  topographyPrice = nbTopography.filter(x => x['topography'].includes(selectedTopography))[0].Cost
  timePrice = turnTime.filter(x => x['time'].includes(selectedTime))[0].Cost
  brandNewConstPrice = $('[data-sf="Brand New Construction"]').is(':checked') ? spFeatures.filter(x => x['feature'].includes('Brand New Construction'))[0].Cost :0;
  ADUPrice = $('[data-sf="Assessory Dwelling Unit (ADU)"]').is(':checked') ? spFeatures.filter(x => x['feature'].includes('Assessory Dwelling Unit (ADU)'))[0].Cost :0;
  viewPrice = $('[data-sf="Views"]').is(':checked') ? spFeatures.filter(x => x['feature'].includes('Views'))[0].Cost :0;
  frontPrice = $('[data-sf="Water Front"]').is(':checked') ? spFeatures.filter(x => x['feature'].includes('Water Front'))[0].Cost :0;
  basementPrice = $('[data-sf="Finished Basement"]').is(':checked') ? spFeatures.filter(x => x['feature'].includes('Finished Basement'))[0].Cost :0;

  if(livingArea < 1500){
    livingAreaPrice = 0
  }else{
    livingAreaPrice = Math.trunc((livingArea - 1251)/250)*25
  }

  if(lotSize < 10000){
    lotSizePrice = 0
  }else{
    lotSizePrice = Math.trunc((lotSize - 5001)/5000)*25
  }

  additionalPrice = locationPrice + topographyPrice + timePrice + brandNewConstPrice + ADUPrice + viewPrice + frontPrice + livingAreaPrice + lotSizePrice + basementPrice

  totalPrice = basePrice + additionalPrice
  totalOrderPrice = totalPrice - ((totalPrice * discountPrice)/100)
  totalDiscount = discountType === 'percentage' ? ((totalPrice * discountPrice)/100) : discountPrice

  $('[data-text="total-price"]').text(totalPrice.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"))
  $('[data-text="discount"]').text(totalDiscount.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"))
  $('[data-text="total-order"]').text(totalOrderPrice.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"))

  $('#Subtotal').val(totalPrice)
  $('#Discount').val(totalDiscount)
  $('#Total-Price').val(totalOrderPrice)
}

$('[data-btn="order"]').on('click', function(e){
  e.preventDefault()
  console.log(brandNewConstPrice,ADUPrice,viewPrice,frontPrice)
  let ref = $(this).attr('href')
  let params = `?appraisalType=${appraisalType}&propertyType=${propertyType}&selectedLocation=${selectedLocation}&selectedTopography=${selectedTopography}&selectedTime=${selectedTime}&basePrice=${basePrice}&additionalPrice=${additionalPrice}&locationPrice=${locationPrice}&totalPrice=${totalPrice}&topographyPrice=${topographyPrice}&timePrice=${timePrice}&brandNewConstPrice=${brandNewConstPrice}&ADUPrice=${ADUPrice}&viewPrice=${viewPrice}&frontPrice=${frontPrice}&livingAreaPrice=${livingAreaPrice}&lotSizePrice=${lotSizePrice}&livingArea=${livingArea}&lotSize=${lotSize}&basementPrice=${basementPrice}`
  let url = location.origin + ref + params
  location.href = url
})

$('[data-btn="discount"]').on('click', function(){
  $('#discount').removeClass('error')
  $('#invalidCoupon').hide()
  let discountVoucher = $('#Discount-Code').val()
  $(this).text('Loading...')

  $.ajax({
    url: 'https://eon0d3yn69lm8k4.m.pipedream.net',
    type: 'GET',
    data: {discountVoucher},
    contentType: "application/json",
    success: function(x){ 
      console.log(x)
      if(x.includes('%')){
        discountType = 'percentage'
        discountPrice = parseInt(x.replace('%',''))
      }else{
        discountType = ''
        discountPrice = parseInt(x)
      }
      updatePrice()
      $('[data-btn="discount"]').text('APPLY')
    },
    error: function(x) {
      console.log(x)
      discountPrice = 0
      $('[data-btn="discount"]').text('APPLY')
      $('#discount').addClass('error')
      $('#invalidCoupon').fadeIn()
      updatePrice()
    }
  });
})

$('#discount').on('input',function(){
  $('#invalidCoupon').fadeOut()
  $('#discount').removeClass('error')
})

$('#wf-form-Order-Form-Inquiry').on('submit', function(e){
  e.preventDefault()
  $('#Min-Lot-Size').remove()
  $('#Max-Lot-Size').remove()
  $('#Min-Living-Area').remove()
  $('#Max-Living-Area').remove()
  $(this).submit()
})

//====================================================================================================
// Adding fill effect before thumb
function updateRangeSlider() {
  const rangeSlider = document.getElementById("myRange");
  const value = (rangeSlider.value - rangeSlider.min) / (rangeSlider.max - rangeSlider.min) * 100;
  var gradient = 'linear-gradient(to right, #e65800, #fa0000 ' + value + '%, #ccc ' + value + '%)';
  rangeSlider.style.background = gradient;
}

function updateRangeSlider2() {
  const rangeSlider2 = document.getElementById("lotRange");
  const value2 = (rangeSlider2.value - rangeSlider2.min) / (rangeSlider2.max - rangeSlider2.min) * 100;
  var gradient2 = 'linear-gradient(to right, #e65800, #fa0000 ' + value2 + '%, #ccc ' + value2 + '%)';
  rangeSlider2.style.background = gradient2;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////

$('[data-appraisal-type]').on('click', updatePrice)
$('[data-property-type]').on('click', updatePrice)
$('[data-location]').on('click', updatePrice)
$('[data-topography]').on('click', updatePrice)
$('[data-time]').on('click', updatePrice)
$('[data-sf]').on('click', updatePrice)

//new range slider
$('#myRange').on('input', () => {
  updateRangeSlider()
  updatePrice()
})
$('#lotRange').on('input', () => {
  updateRangeSlider2()
  updatePrice()
})

$('[data-block="livingArea"] input.track').each(function(){
  $(this).attr('type', 'range')   
})

$('#livingArea').on('input', function(){
  if($(this).val() > 0){
    $('#myRange').val($(this).val())
  }else{
    $('#myRange').val(0)
  }
  updateRangeSlider()
  updatePrice()
})

$('#lotSize').on('input', function(){
  console.log($(this).val())
  if($(this).val() > 0){
    $('#lotRange').val($(this).val()) 
  }else{
    $('#lotRange').val(0) 
  }
  updateRangeSlider2()
  updatePrice()
})

$('#myRange').on('input', function(){
  if($(this).val() > 0){
    $('#livingArea').val($(this).val())
  }else{
    $('#livingArea').val(0)
  }
})

$('#lotRange').on('input', function(){
  console.log($(this).val())
  if($(this).val() > 0){
    $('#lotSize').val($(this).val()) 
  }else{
    $('#lotSize').val(0) 
  }
})

/*$(document).ready(function() {
  var popupOpen = false; // keep track of whether popup is currently open

  // Popup toggle function
  function togglePopup(e) {
    e.stopPropagation();
    if (popupOpen) {
      $('.popup--msg').hide();
      popupOpen = false;
    } else {
      $('.popup--msg').hide();
      $(this).parent().siblings().show();
      popupOpen = true;
    }
  }

  // For desktop devices, bind hover events to icon and popup
  $('.icon--span').hover(function() {
    $(this).parent().siblings().show();
  }, function() {
    $(this).parent().siblings().hide();
  }).click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    togglePopup.call(this, e);
  });

  // Close popup message if clicked outside of it
  $(document).click(function() {
    if (popupOpen) {
      $('.popup--msg').hide();
      popupOpen = false;
    }
  });

  $('.popup--msg').hover(function() {
    popupOpen = true;
  }, function() {
    popupOpen = false;
  });
});*/
$(document).ready(function() {
  var popupOpen = false; // keep track of whether popup is currently open

  // Popup toggle function
  function togglePopup(e) {
    e.stopPropagation();
    if (popupOpen) {
      $('.popup--msg').hide();
      popupOpen = false;
    } else {
      $('.popup--msg').hide();
      $(this).parent().siblings().show();
      popupOpen = true;
    }
  }

  // For desktop devices, bind hover events to icon and popup
  $('.icon--span').hover(function() {
    $(this).parent().siblings().show();
  }, function() {
    $(this).parent().siblings().hide();
  }).click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    togglePopup.call(this, e);
  });

  // Close popup message if clicked outside of it
  $(document).click(function() {
    if (popupOpen) {
      $('.popup--msg').hide();
      popupOpen = false;
      $('a').removeClass('disabled')
    }
  });
  
  // disable link block when popup is open
  $('.icon--block.pricing').find('.icon--span').on('click', function() {
    if ($(this).closest('a').find('[data-type="popup"]').is(':visible')) {
      console.log('block nav')
      $('a').addClass('disabled')
    } else {
      console.log('on nav')
      $('a').removeClass('disabled')
    }
  })

  // Prevent close button from triggering parent link block
  // $('.close-button').click(function(e) {
  //   e.stopPropagation();
  //   e.preventDefault();
  //   $('.popup--msg').hide();
  //   popupOpen = false;
  // });

  $('.popup--msg').hover(function() {
    popupOpen = true;
  }, function() {
    popupOpen = false;
  });
});

updatePrice()
updateRangeSlider()
updateRangeSlider2()