jQuery(document).ready(function($) {
  // Updating Arrow style
  function zl_updateArrowStyle(slider, arrowStyle) {
    // Remove all possible arrow styles 
    slider.removeClass('outer-slider-container inner-slider-container below-slider');
    // Add the new arrow style class
    if (arrowStyle) {
      slider.addClass(arrowStyle);
    }
  }

  // autoplay
  var autopone = $(".zl-slick-design-1").data("a");
  var autoptwo = $(".zl-slick-design-2").data("b");
  var autopthree = $(".zl-slick-design-3").data("c");

  //arrows 
  var arrowone = $(".zl-slick-design-1").data("p");
  var arrowtwo = $(".zl-slick-design-2").data("q");
  var arrowthree = $(".zl-slick-design-3").data("r");

  //dots 
  var dotsone = $(".zl-slick-design-1").data("m");
  var dotstwo = $(".zl-slick-design-2").data("n");
  var dotsthree = $(".zl-slick-design-3").data("o");

  // Loop
  var loopone = $(".zl-slick-design-1").data("h");
  var looptwo = $(".zl-slick-design-2").data("i");
  var loopthree = $(".zl-slick-design-3").data("j");

  // Stop on Hover
  var hoverone = $(".zl-slick-design-1").data("k");
  var hovertwo = $(".zl-slick-design-2").data("w");
  var hoverthree = $(".zl-slick-design-3").data("s");
  
  // Swipe
  var slideswipeone = $(".zl-slick-design-1").data("swipe1");
  var slideswipetwo = $(".zl-slick-design-2").data("swipe2");
  var slideswipethree = $(".zl-slick-design-3").data("swipe3");

  //slide delay 
  var slidedelayone = $(".zl-slick-design-1").data("e");
  var slidedelaytwo = $(".zl-slick-design-2").data("f");
  var slidedelaythree = $(".zl-slick-design-3").data("g");

  // Responsive Desktop   
  var slideresdesktopone = $(".zl-slick-design-1").data("resd1");
  var slideresdesktoptwo = $(".zl-slick-design-2").data("resd2");
  var slideresdesktopthree = $(".zl-slick-design-3").data("resd3");
  //Responsive Laptop screen    
  var slidereslaptopone = $(".zl-slick-design-1").data("resl1");
  var slidereslaptoptwo = $(".zl-slick-design-2").data("resl2");
  var slidereslaptopthree = $(".zl-slick-design-3").data("resl3");
  // Responsive Tablet Screen    
  var sliderestabletone = $(".zl-slick-design-1").data("rest1");
  var sliderestablettwo = $(".zl-slick-design-2").data("rest2");
  var sliderestabletthree = $(".zl-slick-design-3").data("rest3");
  // Lazy Load Images
  var slidelazyloadone = $(".zl-slick-design-1").data("lazyload1");
  var slidelazyloadtwo = $(".zl-slick-design-2").data("lazyload2");
  var slidelazyloadthree = $(".zl-slick-design-3").data("lazyload3");

  // Arrow style design
  var slidearrowstyleone = $(".zl-slick-design-1").data("arrowstyle1");
  var slidearrowstyletwo = $(".zl-slick-design-2").data("arrowstyle2");
  var slidearrowstylethree = $(".zl-slick-design-3").data("arrowstyle3");

  zl_updateArrowStyle($(".zl-slick-design-1"), slidearrowstyleone);
  zl_updateArrowStyle($(".zl-slick-design-2"), slidearrowstyletwo);
  zl_updateArrowStyle($(".zl-slick-design-3"), slidearrowstylethree);
  
  // Event listener for dropdown change
  $("#zl_testimoo_arrowstyle").on("change", function() {
    var selectedStyle = $(this).val();
    // Apply the selected style to all sliders (or adjust as needed for specific sliders)
    zl_updateArrowStyle($(".zl-slick-design-1"), selectedStyle);
    zl_updateArrowStyle($(".zl-slick-design-2"), selectedStyle);
    zl_updateArrowStyle($(".zl-slick-design-3"), selectedStyle);
  });
  // Slick settings for Design 1
  $('.zl-slick-design-1').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    swipe: slideswipeone,
    infinite: true,
    autoplay: autopone !== undefined ? autopone : true,
    autoplaySpeed: slidedelayone,
    arrows: arrowone,
    dots: dotsone,
    pauseOnHover: hoverone !== undefined ? hoverone : true,
    vertical: false, 
    verticalSwiping: false,
    lazyLoad: slidelazyloadone ? 'ondemand' : false,
    // appendArrows: getArrowContainer(slidearrowstyleone),
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 1, //mobile breakpoints
        arrows: arrowone,
      }
    },
    {
      breakpoint: 1921, // desktop breakpoint
      settings: {
          slidesToShow: slideresdesktopone,
          arrows: arrowone,
      }
    },
    {
      breakpoint: 1024, // tablet breakpoint
      settings: {
        slidesToShow: sliderestabletone,
        arrows: arrowone,
      }
    },
    {
      breakpoint: 1281, // laptop breakpoint
      settings: {
        slidesToShow: slidereslaptopone,
        arrows: arrowone,
      }
    },
    ]
  });
  // Slick settings for Design 2
  $('.zl-slick-design-2').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    swipe: slideswipetwo,
    infinite: true,
    autoplay: autoptwo !== undefined ? autoptwo : false,
    autoplaySpeed: slidedelaytwo,
    arrows: arrowtwo,
    dots: dotstwo,
    pauseOnHover: hovertwo !== undefined ? hovertwo : true,
    vertical: false, 
    verticalSwiping: false,
    lazyLoad: slidelazyloadtwo ? 'ondemand' : false,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 1, //mobile breakpoints
        arrows: arrowtwo,
      }
    },
    {
      breakpoint: 1921, // desktop breakpoint
      settings: {
          slidesToShow: slideresdesktoptwo,
          arrows: arrowtwo,
      }
    },
    {
      breakpoint: 1025, // tablet breakpoint
      settings: {
        slidesToShow: sliderestablettwo,
        arrows: arrowtwo,
      }
    },
    {
      breakpoint: 1281, // laptop breakpoint
      settings: {
        slidesToShow: slidereslaptoptwo,
        arrows: arrowtwo,
      }
    },
    ]
  });

  // Slick settings for Design 3
  $('.zl-slick-design-3').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    swipe: slideswipethree,
    infinite: true,
    autoplay: autopthree !== undefined ? autopthree : false,
    autoplaySpeed: slidedelaythree,
    arrows: arrowthree,
    dots: dotsthree,
    pauseOnHover: hoverthree !== undefined ? hovertwo : true,
    vertical: false,
    verticalSwiping: false,
    lazyLoad: slidelazyloadthree ? 'ondemand' : false,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 1, //mobile breakpoints
        arrows: arrowthree,
      }
    },
    {
      breakpoint: 1921, // desktop breakpoint
      settings: {
          slidesToShow: slideresdesktopthree,
          arrows: arrowthree,
      }
    },
    {
      breakpoint: 1025, // tablet breakpoint
      settings: {
        slidesToShow: sliderestabletthree,
        arrows: arrowthree,
      }
    },
    {
      breakpoint: 1281, // laptop breakpoint
      settings: {
        slidesToShow: slidereslaptopthree,
        arrows: arrowthree,
      }
    },
    ]
  });
});

// Top Rated Slider
jQuery(document).ready(function($) {
  $(".top-rated-testimonial-slider").slick({
    dots: true,
    infinite: true,
    speed: 2000,
    slidesToShow: 1,
    adaptiveHeight: true,
    autoplay: false,
    autoplaySpeed: 2000
  });
  
  $('#zl_custom_form').submit(function(event) {
    // Clear previous errors
    $('.zl-err-message').text('');

    // Collect form data
    var valid = true;
    var title = $('#zl_title_t').val().trim();
    var name = $('#zl_name_t').val().trim();
    var designation = $('#zl_designation_t').val().trim();
    var message = $('#zl_message').val().trim();
    var rating = $('.zl_rating_t').val();
    var imageInput = $('#zl_user_profile_t')[0];
    var file = imageInput.files[0];

    // Validate Title
    if (title === '') {
      valid = false;
      $('#zl_title_t').next('.zl-err-message').text('Title Field is required.');
    }
    // Validate Name
    if (name === '') {
      valid = false;
      $('#zl_name_t').next('.zl-err-message').text('Name Field is required.');
    }
    // Validate Designation
    if (designation === '') {
      valid = false;
      $('#zl_designation_t').next('.zl-err-message').text('Designation Field is required.');
    }
    // Validate Message
    if (message === '') {
      valid = false;
      $('#zl_message').next('.zl-err-message').text('Testimonial message Field is required.');
    }
    // Validate Rating
    if (rating === '') {
      valid = false;
      $('.zl_rating_t').next('.zl-err-message').text('Rating Field is required.');
    }
    // Validate Image
    if (file) {
      var fileType = file.type;
      var allowedTypes = ['image/jpeg', 'image/png', 'image/jpg','image/webp'];
      if (!allowedTypes.includes(fileType)) {
        valid = false;
        $('#zl_user_profile_t').next('.zl-err-message').text('Invalid file type. Only JPG, JPEG, and PNG are allowed.');
      } else {
        var img = new Image();
        img.onload = function() {
          if (img.width !== 250 || img.height !== 250) {
            valid = false;
            $('#zl_user_profile_t').next('.zl-err-message').text('The image must be exactly 250x250 pixels.');
          }
        };
        img.src = URL.createObjectURL(file);
      }
    } else {
      valid = false;
      $('#zl_user_profile_t').next('.zl-err-message').text('Image upload Field is required.');
    }

    // Prevent form submission if validation fails
    if (!valid) {
        event.preventDefault();
    }
});
});