$(document).ready(function () {
  var owl = $(".blogs-section").owlCarousel({
    loop: true,
    margin: 10,
    nav: false,
    autoplay: true,
    responsive: {
      0: {
        items: 1,
      },
      600: {
        items: 3,
      },
      1000: {
        items: 3,
      },
    },
  });

  $(".event-section").owlCarousel({
    items: 1,
    loop: true,
    nav: true,
    navigation: true,
    dots: false,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    navText: [
      "<i class='fas fa-chevron-left'></i>",
      "<i class='fas fa-chevron-right'></i>",
    ],
    responsive: {
      0: {
        items: 1,
      },
      600: {
        items: 1,
      },
      1000: {
        items: 1,
      },
    },
  });

  $(".parents-reviews").owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    dots: true,
    autoplay: true,
    autoplayTimeout: 5000,
    responsive: {
      0: {
        items: 1,
      },
      600: {
        items: 3,
      },
      1000: {
        items: 3,
      },
    }
  });

  // Function to update #blog-view
  function updateBlogView() {
    var activeItem = $(".owl-carousel .owl-item.active").eq(2).find(".d-none");
    var img = activeItem.data("img");
    var title = activeItem.data("title");
    var content = activeItem.data("content");
    var url_blog = activeItem.data("url");

    var blogViewHtml = `
	<div class='d-none d-md-block' style='background-image: url("${img}"); background-size: cover; height: 50vh; background-repeat: no-repeat; padding: 50% 20px 0 20px;'>
	<h3 class='text-white'>${title}</h3>
	<p class='text-white mb-1'>${content}</p>
	<a href="${url_blog}" class='text-white text-decoration-underline'>Read More</a>
	</div>
	`;

    $("#blog-view").html(blogViewHtml);
  }

  updateBlogView();

  owl.on("changed.owl.carousel", function (event) {
    updateBlogView();
  });

});
function handleSelect(select) {
  const value = select.value;
  console.log('Selected value:', value); // This will log the selected value
  if (value !== '#') {
      window.location.href = value;
  }
}