/**
* Template Name: ZenBlog - v1.3.0
* Template URL: https://bootstrapmade.com/zenblog-bootstrap-blog-template/
* Author: BootstrapMade.com
* License: https:///bootstrapmade.com/license/
*/
document.addEventListener('DOMContentLoaded', () => {
  "use strict";

  /**
   * Sticky header on scroll
   */
  const selectHeader = document.querySelector('#header');
  if (selectHeader) {
    document.addEventListener('scroll', () => {
      window.scrollY > 100 ? selectHeader.classList.add('sticked') : selectHeader.classList.remove('sticked');
    });
  }

  /**
   * Mobile nav toggle
   */

  const mobileNavToogleButton = document.querySelector('.mobile-nav-toggle');

  if (mobileNavToogleButton) {
    mobileNavToogleButton.addEventListener('click', function(event) {
      event.preventDefault();
      mobileNavToogle();
    });
  }

  function mobileNavToogle() {
    document.querySelector('body').classList.toggle('mobile-nav-active');
    mobileNavToogleButton.classList.toggle('bi-list');
    mobileNavToogleButton.classList.toggle('bi-x');
  }

  /**
   * Hide mobile nav on same-page/hash links
   */
  document.querySelectorAll('#navbar a').forEach(navbarlink => {

    if (!navbarlink.hash) return;

    let section = document.querySelector(navbarlink.hash);
    if (!section) return;

    navbarlink.addEventListener('click', () => {
      if (document.querySelector('.mobile-nav-active')) {
        mobileNavToogle();
      }
    });
  });

  /**
   * Toggle mobile nav dropdowns
   */
  const navDropdowns = document.querySelectorAll('.navbar .dropdown > a');

  navDropdowns.forEach(el => {
    el.addEventListener('click', function(event) {
      if (document.querySelector('.mobile-nav-active')) {
        event.preventDefault();
        this.classList.toggle('active');
        this.nextElementSibling.classList.toggle('dropdown-active');

        let dropDownIndicator = this.querySelector('.dropdown-indicator');
        dropDownIndicator.classList.toggle('bi-chevron-up');
        dropDownIndicator.classList.toggle('bi-chevron-down');
      }
    })
  });

  /**
   * Scroll top button
   */
  const scrollTop = document.querySelector('.scroll-top');
  if (scrollTop) {
    const togglescrollTop = function() {
      window.scrollY > 100 ? scrollTop.classList.add('active') : scrollTop.classList.remove('active');
    }
    window.addEventListener('load', togglescrollTop);
    document.addEventListener('scroll', togglescrollTop);
    scrollTop.addEventListener('click', window.scrollTo({
      top: 0,
      behavior: 'smooth'
    }));
  }

  /**
   * Hero Slider
   */
  var swiper = new Swiper(".sliderFeaturedPosts", {
    spaceBetween: 0,
    speed: 500,
    centeredSlides: true,
    loop: true,
    slideToClickedSlide: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".custom-swiper-button-next",
      prevEl: ".custom-swiper-button-prev",
    },
  });

  /**
 * Open and close the search form.
 */
const searchOpen = document.querySelector('.js-search-open');
const searchClose = document.querySelector('.js-search-close');
const searchWrap = document.querySelector(".js-search-form-wrap");
const searchInput = document.getElementById('search-input');
let originalPage = window.location.pathname;

searchOpen.addEventListener("click", (e) => {
  e.preventDefault();
  searchWrap.classList.add("active");
  searchInput.focus();
});

searchClose.addEventListener("click", (e) => {
  e.preventDefault();
  searchWrap.classList.remove("active");
  window.location.href = originalPage;
});

/**
 * AJAX search functionality
 */
searchInput.addEventListener('keyup', function (e) {
  const query = searchInput.value.trim();

  if (query.length > 0) {
    // Perform AJAX request to fetch search results
    const xhr = new XMLHttpRequest();
    xhr.open("GET", `search.html&q${encodeURIComponent(query)}`, true);

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // If the request is successful, replace the current content with the search results
        document.body.innerHTML = xhr.responseText;
      }
    };

    xhr.send();
  } else {
    // If input is cleared, return to the original page
    window.location.href = originalPage;
  }

  // Handle enter key to trigger the search
  if (e.key === 'Enter') {
    e.preventDefault();
    window.location.href = `index.php?page=search&q=${encodeURIComponent(query)}`;
  }
});

  /**
   * Initiate glightbox
   */
  const glightbox = GLightbox({
    selector: '.glightbox'
  });

  /**
   * Animation on scroll function and init
   */
  function aos_init() {
    AOS.init({
      duration: 1000,
      easing: 'ease-in-out',
      once: true,
      mirror: false
    });
  }
  window.addEventListener('load', () => {
    aos_init();
  });

});


  $(document).ready(function() {
    const track = $('.carousel-track');
    const items = $('.carousel-item');
    const prevBtn = $('#prevBtn');
    const nextBtn = $('#nextBtn');
    const itemWidth = items.outerWidth(true); // Get the width of each item including margin
    const totalItems = items.length;
    let currentIndex = 0;

    nextBtn.click(function() {
      if (currentIndex < totalItems - 4) {
        currentIndex++;
        const moveAmount = -itemWidth * currentIndex;
        track.css('transform', `translateX(${moveAmount}px)`);
      }
    });

    prevBtn.click(function() {
      if (currentIndex > 0) {
        currentIndex--;
        const moveAmount = -itemWidth * currentIndex;
        track.css('transform', `translateX(${moveAmount}px)`);
      }
    });
  });

//SEARCH 
  document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.querySelector('.search-form input[type="text"]');
    const searchForm = document.querySelector('.search-form');

    searchInput.addEventListener('keyup', function(event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            performSearch(this.value);
        } else {
            performSearch(this.value);
        }
    });

    function performSearch(query) {
        if (query.length === 0) {
            // Clear the results if the query is empty
            document.querySelector('#search-result .container .row .col-md-9').innerHTML = '';
            return;
        }

        const xhr = new XMLHttpRequest();
        xhr.open('GET', `index.php?page=search?q=${query}`, true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                const results = JSON.parse(xhr.responseText);
                displayResults(results);
            }
        };
        xhr.send();
    }

    function displayResults(results) {
        const resultsContainer = document.querySelector('#search-result .container .row .col-md-9');
        resultsContainer.innerHTML = '<h3 class="category-title">Search Results</h3>';

        if (results.length === 0) {
            resultsContainer.innerHTML += '<p>No results found.</p>';
        } else {
            results.forEach(result => {
                const resultElement = `
                    <div class="d-md-flex post-entry-2 small-img">
                      <a href="./index.php?page=read_news&c=${result.id}" class="me-4 thumbnail">
                        <img src="assets/uploads/content_images/${result.cover_img}" alt="" class="img-fluid">
                      </a>
                      <div>
                        <div class="post-meta"><span class="date">${result.category}</span> <span class="mx-1">&bullet;</span> <span>${result.date_published}</span></div>
                        <h3><a href="./index.php?page=read_news&c=${result.id}">${result.title}</a></h3>
                        <p>${result.content}</p>
                        <div class="d-flex align-items-center author">
                          <div class="photo"><img src="assets/img/person-2.jpg" alt="" class="img-fluid"></div>
                          <div class="name">
                            <h3 class="m-0 p-0">Mkazuzu</h3>
                          </div>
                        </div>
                      </div>
                    </div>
                `;
                resultsContainer.innerHTML += resultElement;
            });
        }
    }
});