$(document).ready(function(){
  // var containerId = `#coreForm`;
  var containerId = '#coreForm-contact';
  var formId = '#coreForm-contact';
  var html = `<form id="_form" enctype="multipart/form-data" method="POST" action="" style="margin-top:20px;"><input type="hidden" name="FORM_ACTION" value="1"><input type="hidden" name="__f__" value="contact"><input type="hidden" name="__uq__" value=""><input type="hidden" name="__uqf__" value=""><input type="hidden" name="__uqv__" value=""><div class="row"><div class="_messages"></div><div class="col-md-6 col-sm-6"><div id="_form_group_for_form_field_fname" style="" class="form-group"><label for="form_field_fname" class="control-label">First Name<strong class="text-danger">*</strong></label><input id="form_field_fname" name="form_field_fname" maxlength="50" alt="" title="" type="text" class="form-control input-sm" placeholder="First Name" data-required="true"  value=""></div></div><div class="col-md-6 col-sm-6"><div id="_form_group_for_form_field_lname" style="" class="form-group"><label for="form_field_lname" class="control-label">Last Name<strong class="text-danger">*</strong></label><input id="form_field_lname" name="form_field_lname" maxlength="50" alt="" title="" type="text" class="form-control input-sm" placeholder="Last Name" data-required="true"  value=""></div></div><div class="12"></div><div class="col-md-6 col-sm-6"><div id="_form_group_for_form_field_company" style="" class="form-group"><label for="form_field_company" class="control-label">Company Name or Organization</label><input id="form_field_company" name="form_field_company" maxlength="50" alt="Leave blank if this is for personal use." title="Leave blank if this is for personal use." type="text" class="form-control input-sm" placeholder="Company Name or Organization" value=""></div></div><div class="col-md-6 col-sm-6"><div id="_form_group_for_form_field_title" style="" class="form-group"><label for="form_field_title" class="control-label">Company Title</label><input id="form_field_title" name="form_field_title" maxlength="50" alt="" title="" type="text" class="form-control input-sm" placeholder="Company Title" value=""><p class="help-block"><small>(Optional)</small></p></div></div><div class="clearfix"></div><div class="col-md-12"><div id="_form_group_for_form_field_email" style="" class="form-group"><label for="form_field_email" class="control-label">E-mail<strong class="text-danger">*</strong></label><input id="form_field_email" name="form_field_email" maxlength="50" alt="Please enter a valid email address." title="Please enter a valid email address." type="text" class="form-control input-sm" placeholder="E-mail" data-required="true"  value=""></div></div><div class="col-md-6"><div id="_form_group_for_form_field_ordernumber" style="" class="form-group"><label for="form_field_ordernumber" class="control-label">Order #</label><input id="form_field_ordernumber" name="form_field_ordernumber" maxlength="20" alt="Include your Order number or Quote number if available." title="Include your Order number or Quote number if available." type="text" class="form-control input-sm" placeholder="Order #" value=""></div></div><div class="col-md-6"><div id="_form_group_for_form_field_phone" style="" class="form-group"><label for="form_field_phone" class="control-label">Phone #</label><input id="form_field_phone" name="form_field_phone" maxlength="20" alt="Please include your area code with the Phone number." title="Please include your area code with the Phone number." type="text" class="form-control input-sm" placeholder="Phone #" value=""></div></div><div class="clearfix"></div><div class="col-md-12"><div id="_form_group_for_form_field_subject" style="" class="form-group"><label for="form_field_subject" class="control-label">Subject<strong class="text-danger">*</strong></label><input id="form_field_subject" name="form_field_subject" maxlength="50" alt="Please enter your question or topic" title="Please enter your question or topic" type="text" class="form-control input-sm" placeholder="Subject" data-required="true"  value=""></div></div><div class="clearfix"></div><div class="col-md-12"><div id="_form_group_for_form_field_message" class="form-group"><label for="form_field_message" class="control-label">Message<strong class="text-danger">*</strong></label><textarea id="form_field_message" name="form_field_message" maxlength="1000" alt="Please describe your question or the information you would like." title="Please describe your question or the information you would like." class="form-control  input-sm" rows="8" placeholder="Message" data-required="true" ></textarea></div></div><div class="12"></div><div class="12"></div><div class="clearfix"></div><div class="col-md-12 col-sm-12 col-xs-12"><input id="_form_submit" type="submit" class="btn btn-primary formsHandlerSubmitButton" value="Send Message"></div><div class="col-md-9 col-sm-12  col-xs-12"><div id="_form_error_message" class="alert"></div></div></div></form>`;
	var form_group_prefix = '_form_group_for_';
	// var $field_prefix = 'form_field_';
	var $error_class = 'has-error animated rubberBand';
	// var $o = $('#_form_submit');
  var tmpSubmitLabel = '';
  var progress = null;
  var progressInterval = 500;
  var progressTimer = 0;
  var progressValue = 0;
  var waitingForResponse = false;
  var hasUploadableFiles = false;

  console.log('>>>>>>>>>>>', formId, containerId);

  if($(formId).length == 0){
    console.log(formId,'not found');
    if($('#coreForm').length>0){
      $('#coreForm').attr('id', formId.replace('#',''));
      console.log('changed coreForm id to ',formId);
      containerId = formId;
    }
  } else {
    console.log('form',formId,'found');
  }
  
  console.log("loaded v3");
	$(containerId).hide();
  $(containerId).html(html);
  $('body').append(getModalHtml());
  $('body').append(getFormModalHtml());
  

  setTimeout(function(){
    hasUploadableFiles = $(`${containerId} form#_form input[type="file"]`).length>0;
    tmpSubmitLabel = $(`${containerId} #_form_submit`).val();
    $(`${containerId} form#_form`).prepend('<input type="hidden" name="JS" value="1">');
	  $(`${containerId} #_form_submit`).replaceWith('<button id="_form_submit" type="button" class="btn btn-primary btn-lg formsHandlerSubmitButton">'+tmpSubmitLabel+'</button>');
    if($(`${containerId} #_form input[name="__uqf__"]`).val().trim()!=''){
      handleMultiform();
    }
    $(containerId).show();
  },200);
	function handleMultiform(){
    var completeEvent = true;
    $('body').on('click','.openFormModal',function(){
      var id = $(this).data('product');
      if($(this).data('handler')){
        var handler = `#coreForm-${$(this).data('handler')}`;
        if(handler != containerId){
          completeEvent = false;
          console.error(handler, containerId);
          return false;
        }
      }
      
      if($(this).hasClass("formAutoFillInfo")){
        var colors = [];
        $(`${containerId} #__product_attr_col input, ${containerId} #__product_attr_col select`).each(function(){
          if($(this).hasClass('email-field')){
            $('#core-form-modal #form_field_email').val($(this).val());
          } else if($(this).data('code') == 'Material'){
            $('#core-form-modal #form_field_material').val($(this).find('option:selected').text());
          } else if($(this).data('code') == 'Color_001'){
            if($(this).val()!='None'){
              colors.push($(this).find('option:selected').text());
            } 
          } else if($(this).data('code') == 'Color_002'){
            if($(this).val()!='None'){
              colors.push($(this).find('option:selected').text());
            }
          } else if($(this).data('code') == 'Color_003'){
            if($(this).val()!='None'){
              colors.push($(this).find('option:selected').text());
            }
          }
        });
        $(`#core-form-modal #form_field_colors`).val(colors.join(', '));
      }
      $(`${containerId} #_form input[name="__uqv__"]`).val(id);
      console.log(id);
      renderFormModal(`Product: ${id}`, false)
    });
    if(completeEvent){
      $(containerId).appendTo('#core-form-modal .modal-body');
    }
  }
	$('body').on('click',`${containerId} #_form_submit`,function(){
    console.log(`${containerId} #_form_submit`);
    renderModal(`<div class="text-center"><h1 class="text-center" style="font-size:80px"><i class="fa fa-spinner fa-spin"></i></h1><p>Processing, please wait...</p><div id="form-progress"><div class="progress">
    <div id="core-form-progress-bar-val" class="progress-bar" role="progressbar" style="width: 0%;"></div>
    </div>
    </div></div>`);
    // tmpSubmitLabel = $(this).html();
    // $(this).html('<i class="fa fa-spinner fa-spin"></i> Processing, Please Wait...');
    endProgress();
    setTimeout(function(){
      // sendData();
      progressTimer = millis();
      progressValue = 0;
      if(validate()===true){
        _enable();
        sendData();
      } else {
        closeModal();
        _enable();
        progressTimer = 0;
      }
    },250);
		
	});
  function startProgress(){
    clearTimeout(progress);
    
    progress = null;
    progress = setTimeout(function(){
      if(progressValue<100){
        progressValue += 1;
        if($('#form-progress > #core-form-progress-bar-val').length==0){
          $('#form-progress').html(`<div class="progress">
<div id="core-form-progress-bar-val" class="progress-bar" role="progressbar" style="width: ${progressValue}%;"></div>
</div>`);
        } else {
          $('#core-form-progress-bar-val').css('width',`${progressValue}%`);
        }
        startProgress();
      } else {
        if(hasUploadableFiles){
          $("#form-progress").append("<p>Please wait while your files upload is complete, this can take a few minutes depending on the file size</p>")
        }
        endProgress();
      }
    }, progressInterval);
    // progressInterval += 10;
  }
  function extendProgress(){
    // progressInterval += 250;
    // startProgress();
  }
  function endProgress(){
    clearTimeout(progress);
    progress = null;
    progressInterval = 100;
  }
  function sendData(){
    // console.log(containerId);
    var formData = new FormData($(`${containerId} form#_form`)[0]);
    var loc = 'https://www.all-stickers.com/forms/quote.js';
    if(window.location.hostname == 'localhost'){
      loc = 'http://localhost/forms/quote.js';
    }
    // console.log(formData);
    startProgress();
    $(`.formsHandlerSubmitButton`).prop("disable", true);
    waitingForResponse = true;
    $.ajax({
        // url: 'http://localhost/forms/quote.js',
        url: loc,
        type: 'POST',
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000,
        error: function (data) {
          $(`.formsHandlerSubmitButton`).prop("disable", false);
          console.error(data);
          endProgress();
          closeModal();
          progressTimer = 0;
          waitingForResponse = false;
          alert("A server error has occurred");
          console.error(data);
          
        },
        complete: function (data) {
          $(`.formsHandlerSubmitButton`).prop("disable", false);
          setTimeout(function(){
            if(waitingForResponse){
              waitingForResponse = false;
              endProgress();
              closeModal();
              progressTimer = 0;
            }
            
          },100);
        },
        success: function (data){
          $(`.formsHandlerSubmitButton`).prop("disable", false);
          waitingForResponse = false;
          formSuccess(data);
        },
    });
  }
  function formSuccess(data){
    endProgress();
    if($('#core-form-progress-bar-val').length>0){
      // $('#core-form-progress-bar-val').css('animation-duration', '0.0s').removeClass('progress-bar');
      $('#core-form-progress-bar-val').css('width',`100%`);
    }
    setTimeout(function(){
      if(data == ''){
        alert("An Unknown error occurred");
      } else {
        data = JSON.parse(data);
        // console.log(data);
        if(data.hasOwnProperty("log")){
          // console.log(data.log);
          // console.log(data.log[0].message);
        }
        if(data.error){
          alert(`** ERROR **\n${data.message}`);
          if(data.field!=''){
            field_error($(`#${data.field}`), '');
          }
        } else {
          // alert(`${data.title}\n${data.message}`);
          // alert(`Complete`);
        }
        if(data.html!=''){
          $(`${containerId} ._messages`).html(data.html);
        }
      }
      closeModal();
      $(containerId).get(0).scrollIntoView({behavior: 'smooth'});
    },600);
  }


  function closeFormModal(){
    $('#core-form-modal').modal('hide'); 
  }
  function renderFormModal(title=''){
    $('#core-form-modal .modal-title').html(title);
    $('#core-form-modal').modal('show');
  }
  function getFormModalHtml(){
    if($(`#core-form-modal`).length>0){
      return '';
    }
    return `<div id="core-form-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width:95%;" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Product</h4>
        </div>

        <div class="modal-body"></div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->`;
  }




  function closeModal(){
    $('#core-form-progress-modal').modal('hide'); 
  }
  function renderModal(message, title='', showCloseButton=false){
    if(showCloseButton){
      $('#core-form-progress-modal .modal-content').append(`<div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>`);
    }
    if(title!=''){
      $('#core-form-progress-modal .modal-content').prepend(`<div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">${title}</h4>
    </div>`);
    }
    $('#core-form-progress-modal .modal-body').prepend(message);

    $('#core-form-progress-modal').modal('show');
  }
  function getModalHtml(){
    if($(`#core-form-progress-modal`).length>0){
      return '';
    }
    setTimeout(function(){
      $('#core-form-progress-modal').on('hidden.bs.modal', function () {
        $('#core-form-progress-modal .modal-content').html('<div class="modal-body lead"></div>');
      })
    }, 500);
    return `<div id="core-form-progress-modal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" style="z-index:99999999 !important;"  role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body lead">
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->`;
  }
	function validate(){
		var $id = '';
		var $ok = true;
		$(`${containerId} .has-error`).removeClass($error_class);
		_disable();
		$(`${containerId} [data-required="true"]`).each(function(){
			$id = $(this).attr('id');
			if ($id=='form_field_email'){
				if (validate_email($(this).val())===false){
					$ok = false;
					return field_error($(this),'is invalid');
				}
			} else {
				if ( $(this).val()=='' ){
					$ok = false;
					return field_error($(this),'is required');
				}
			}
		});
		if($(`${containerId} #_form_quote_sms_number1`).length===1){
			var $sms1 = $(`${containerId} #_form_quote_sms_number1`).val();
			var $sms2 = $(`${containerId} #_form_quote_sms_number2`).val();
			var $sms3 = $(`${containerId} #_form_quote_sms_number3`).val();
			if($sms1!==''||$sms2!==''||$sms3!==''){
				// theres at least one of the 3 entered
				if($sms1===''){
					$ok = false;
					return sms_field_error($(`${containerId} #_form_group_for_form_quote_sms_number`),'is missing');
				} else if($sms2===''){
					$ok = false;
					return sms_field_error($(`${containerId} #_form_group_for_form_quote_sms_number`),'is missing');
				} else if($sms3===''){
					$ok = false;
					return sms_field_error($(`${containerId} #_form_group_for_form_quote_sms_number`),'is missing');
				}
			}
		}
		return $ok;
	}
	if($(`${containerId} #_form_quote_sms_number1`).length===1){
		$(`${containerId} #_form_quote_sms_number1,${containerId} #_form_quote_sms_number2,${containerId} #_form_quote_sms_number3`).keypress(function(evt){
			evt = (evt) ? evt : window.event;
			var charCode = (evt.which) ? evt.which : evt.keyCode;
			if (charCode > 31 && (charCode < 48 || charCode > 57)) {
				return false;
			}
			return true;
		});
		
		$(`${containerId} #_form_quote_sms_number1`).keyup(function(){
			_sms_next($(this),`${containerId} #_form_quote_sms_number2`,3);
		});
		$(`${containerId} #_form_quote_sms_number2`).keyup(function(){
			_sms_next($(this), `${containerId} #_form_quote_sms_number3`,3);
		});
		
	}
	function _sms_next($this,$next_id,$length){
		if($this.val().length==$length){
			$($next_id).focus();
		}
	}
	function _enable(){
		$(`${containerId} input,${containerId} textarea,${containerId} select,${containerId} button`).prop('disabled', false);
    $(`${containerId} #_form_submit`).html(tmpSubmitLabel);
	}
	function _disable(){
		$(`${containerId} input,${containerId} textarea,${containerId} select,${containerId} button`).prop('disabled', true);
	}
	function field_error($this,$message=''){
    if($message!=''){
      alert('"'+$this.attr('placeholder')+'" '+$message);
    }
		var $id = $this.attr('id');
		var $p = $this.closest('.form-group');
    $(`${containerId} #${form_group_prefix}${$id}`).addClass($error_class);
		// $('#'+form_group_prefix+$id).addClass($error_class);
		$this.focus();
		$this.select();
		if($p){
			$('html, body').animate({
				scrollTop: $p.offset().top-40
			}, 200);
		}
		return false;
	}
  // form_field_fname
	function sms_field_error($this,$message){
		alert('Part of the SMS number is invalid or missing');
		//var $id = $this.attr('id');
		var $p = $(`${containerId} #_form_group_for_form_quote_sms_number`);
		$p.addClass($error_class);
		$this.select();
		$this.focus();
		if($p){
			$('html, body').animate({
				scrollTop: $p.offset().top-40
			}, 200);
		}
		return false;
	}
	function validate_email(email) { 
		if(email==''){return false;}
		var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return re.test(email);
	}
  function millis(){
    return Date.now();
  }
});