// Add your custom JS here.
jQuery( document ).ready(function($) {
    AOS.init({
        // Global settings:
        disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
        startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
        initClassName: 'aos-init', // class applied after initialization
        animatedClassName: 'aos-animate', // class applied on animation
        useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
        disableMutationObserver: false, // disables automatic mutations' detections (advanced)
        debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
        throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
        
      
        // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
        offset: 120, // offset (in px) from the original trigger point
        delay: 0, // values from 0 to 3000, with step 50ms
        duration: 400, // values from 0 to 3000, with step 50ms
        easing: 'ease', // default easing for AOS animations
        once: false, // whether animation should happen only once - while scrolling down
        mirror: false, // whether elements should animate out while scrolling past them
        anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
      
      });


    $('.wp-block-button__link').attr('tabindex', 0);
    $('.cf7mls_btn').attr('tabindex', 0);
     $('#Layer_1').appendTo('.n2-ss-slider-wrapper-inside');
     $('#Layer_1').show();
    
    $(document).on("click","#register-here",function() {
        $('.wp-block-group.register').toggle();
        $('.numbers-second .wp-block-column:first-child a.wp-block-button__link').toggleClass('rotated');
        $([document.documentElement, document.body]).animate({
            scrollTop: $(".wp-block-group.register").offset().top
        }, 500);

    });

    var maxLength = 200;

    $('#description-of-services').keyup(function() {
        console.log('keyup');
        var length = $(this).val().length;
        console.log(length);
        var length = maxLength - length;
        console.log(length);
        $('#chars').text(length);
    });

    


    $( "#wpsl-search-input" ).on( "keydown", function(event) {
        if(event.which == 13){
            $('#wpsl-s').show();     
        }
    });    

    $( "#register-here" ).on( "keydown", function(event) {
        if(event.which == 13){
            $('.wp-block-group.register').toggle();
            $('.numbers-second .wp-block-column:first-child a.wp-block-button__link').toggleClass('rotated');
            $([document.documentElement, document.body]).animate({
                scrollTop: $(".wp-block-group.register").offset().top
            }, 500);
     
        }
    });

    $('.wpcf7-form-control-wrap').each(function( index ) {
        $(this).parent().addClass($(this).attr('class').split(' ')[1]);
    });

    document.addEventListener( 'wpcf7mailsent', function( event ) {
        if ( '36' == event.detail.contactFormId ) {
            console.log('wpcf7submit');
            $('.fieldset-cf7mls-wrapper').remove();
            $('.cf7mls_progress_bar').remove();
            $('.thank-you').show();
        }
    }, false );

    var boxes = document.querySelectorAll("g");
    var box = getShuffledArr(boxes);

    function getShuffledArr (arr){
        return [...arr].map( (_, i, arrCopy) => {
            var rand = i + ( Math.floor( Math.random() * (arrCopy.length - i) ) );
            [arrCopy[rand], arrCopy[i]] = [arrCopy[i], arrCopy[rand]]
            return arrCopy[i]
        })
    }
    
    
    box.forEach((element,i) => {
        setTimeout(
            function(){
                animateMe(element)
            }
        , i * 900);

        });
    
    function animateMe(box){
        let tl = gsap.timeline();
        tl.to(box, 1.5, {opacity:0.6})
        .to(box, 1.5,{opacity:0.07})
    }
    

    
    function randomNumber(min, max) {
      return Math.random() * (max - min) + min;
    }
    

    updateContainer()

function updateContainer() {
   
    var maxHeight = 0;
    $(".numbers-block").height('auto');     
    $(".numbers-block").each(function(index){
        if ($(window).width() > 1200) {
            delay = index * 200 + 300;
            $(this).attr('data-aos-delay', delay);
        }
       if ($(this).height() > maxHeight) { maxHeight = $(this).height();}
    });  
    $(".numbers-block").height(maxHeight);     
  
}


$( window ).resize(function() {
    updateContainer();
})




function animateValue(id, start, end, duration) {
    var start= 0 ;

    // here we retrieve the text of the 'target' element by its 'id',
    // and convert the returned value into a number, using
    // parseInt(); the first argument is the string to convert and
    // the second is the numeric base of the number into which you
    // want to convert the given numeric string:
    var end = parseInt(document.getElementById(id).textContent, 10);
    var duration = 500;
    var range = end - start;
    var current = start;
    var increment = end > start? 1 : -1;
    var stepTime = Math.abs(Math.floor(duration / range));
    var obj = document.getElementById(id);
    var timer = setInterval(function() {
        current += increment;
        obj.innerHTML = current;
        if (current == end) {
            clearInterval(timer);
        }
    }, stepTime);
}

$(window).on('load resize scroll', function() {
   // elementInViewport($('#number16'), 'number16');
   // elementInViewport($('#number17'), 'number17');
    elementInViewport($('#find-number'), 'find-number');
  });

  function elementInViewport(element, id) {
    if (inViewport(element) && !$(element).hasClass('done')) {
        animateValue(id ,0,0,5000);
        $(element).addClass('done')
    }
  }

  function inViewport(element) {
    if (typeof jQuery === "function" && element instanceof jQuery) {
      element = element[0];
    }
    var elementBounds = element.getBoundingClientRect();
    return (
      elementBounds.top >= 0 &&
      elementBounds.left >= 0 &&
      elementBounds.bottom <= $(window).height() &&
      elementBounds.right <= $(window).width()
    );
  }


  $(document).on("click",".start_a_contact",function() {
    $('#exampleModalLong').find('form').append('<input type="hidden" name="planner_id" value="'+$(this).data('store-id')+'"/>')
    $('#exampleModalLong').modal('show');
  });

  $(document).on("click",".find-a-planner-close",function() {
    $('#exampleModalLong').modal('hide');
  });


  document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '142' == event.detail.contactFormId ) {
     

      if($(event.target).hasClass('invalid')) {
        $('#exampleModalLong').find('form').show();
        return;
      }
      event.preventDefault();
        var service_choices = "";
        $('.service-choose-container input[type="checkbox"]:checked').each(function() {
          if(service_choices == "") {
            service_choices = $(this).val();
          } else {
            service_choices += ", " + $(this).val();
          }
        });
        var html= '<h5 class="modal-title" style="text-align:center;" id="exampleModalLongTitle">THANK YOU!</h5><p><center>An eos dolore accusamus vituperatoribus. Ei pertinax appellantur mei, verear atomorum cu pro.</center></p>'
        jQuery.ajax({
          url: '/wp-admin/admin-ajax.php',
          method: "POST",
          data: {
            action: 'send_planner_notice',
            name: $("[name='your-name']").val(),
            email: $("[name='your-email']").val(),
            phone: $("[name='your-phone']").val(),
            panner_id: $("[name='planner_id']").val(),
            choices:service_choices
          },
          beforeSend: function(xhr) {
                 
          },
          success: function(response) {
            $('#exampleModalLong').find('form').html(html);
            $('#exampleModalLong').find('form').append(response.data.html);
            $('#exampleModalLong').find('form').show();
          }

        });          
    }
  }, false );



});