Slide Management

/**
 * Add slides to the carousel
 * @param markup - HTML string or DOM element(s) to add as slides
 * @param index - Position to insert at (optional, null = end)
 * @param addBefore - Insert before the index position if true (optional)
 */
$('.slider').slick('slickAdd', markup, index, addBefore);

// Add slide at the end
$('.slider').slick('slickAdd', '<div class="slide">New slide</div>');

// Add slide at the beginning
$('.slider').slick('slickAdd', '<div class="slide">First slide</div>', 0, true);

// Add slide at specific position (index 2)
$('.slider').slick('slickAdd', '<div class="slide">Inserted slide</div>', 2);

// Add slide before specific position
$('.slider').slick('slickAdd', '<div class="slide">Before slide 3</div>', 3, true);

// Add multiple slides
var newSlides = `
  <div class="slide">Slide A</div>
  <div class="slide">Slide B</div>
  <div class="slide">Slide C</div>
`;
$('.slider').slick('slickAdd', newSlides);

// Add slide with dynamic content
var productHtml = `
  <div class="slide">
    <img src="${product.image}" alt="${product.name}">
    <h3>${product.name}</h3>
    <p>$${product.price}</p>
  </div>
`;
$('.slider').slick('slickAdd', productHtml);

// Add DOM element
var slideElement = document.createElement('div');
slideElement.className = 'slide';
slideElement.innerHTML = '<h3>DOM Element Slide</h3>';
$('.slider').slick('slickAdd', slideElement);

/**
 * Remove slides from the carousel
 * @param index - Slide index to remove, or boolean for first/last
 * @param removeBefore - Remove slide before index if true
 * @param removeAll - Remove all slides if true
 */
$('.slider').slick('slickRemove', index, removeBefore, removeAll);

// Remove slide at index 2
$('.slider').slick('slickRemove', 2);

// Remove first slide
$('.slider').slick('slickRemove', true); // true = first slide

// Remove last slide
$('.slider').slick('slickRemove', false); // false = last slide

// Remove slide before index 3
$('.slider').slick('slickRemove', 3, true);

// Remove all slides
$('.slider').slick('slickRemove', null, null, true);

// Remove current slide
var currentSlide = $('.slider').slick('slickCurrentSlide');
$('.slider').slick('slickRemove', currentSlide);

// Remove multiple slides (remove 3 slides starting from index 1)
for (let i = 0; i < 3; i++) {
  $('.slider').slick('slickRemove', 1); // Always remove index 1 as slides shift
}

/**
 * Filter slides based on selector or function
 * @param filter - jQuery selector string or filter function
 */
$('.slider').slick('slickFilter', filter);

// Filter by CSS class
$('.slider').slick('slickFilter', '.active');

// Filter by data attribute
$('.slider').slick('slickFilter', '[data-category="featured"]');

// Filter by custom selector
$('.slider').slick('slickFilter', '.slide:has(img)');

// Filter using function
$('.slider').slick('slickFilter', function(index) {
  return $(this).find('.price').text().replace('$', '') < 100;
});

// Filter by content
$('.slider').slick('slickFilter', function() {
  return $(this).text().toLowerCase().includes('sale');
});

// Dynamic filtering based on user input
$('#category-filter').change(function() {
  var category = $(this).val();
  if (category === 'all') {
    $('.slider').slick('slickUnfilter');
  } else {
    $('.slider').slick('slickFilter', `[data-category="${category}"]`);
  }
});

// Search-based filtering
$('#search-input').on('input', function() {
  var searchTerm = $(this).val().toLowerCase();
  if (searchTerm === '') {
    $('.slider').slick('slickUnfilter');
  } else {
    $('.slider').slick('slickFilter', function() {
      return $(this).text().toLowerCase().includes(searchTerm);
    });
  }
});

/**
 * Remove applied filter and show all slides
 */
$('.slider').slick('slickUnfilter');

// Remove current filter
$('.slider').slick('slickUnfilter');

// Reset filter on button click
$('#show-all-btn').click(function() {
  $('.slider').slick('slickUnfilter');
});

// Clear filter and search
function clearFilters() {
  $('.slider').slick('slickUnfilter');
  $('#search-input').val('');
  $('#category-filter').val('all');
}

// Load and add slides from API
async function loadMoreSlides() {
  try {
    const response = await fetch('/api/slides?page=2');
    const slides = await response.json();
    
    slides.forEach(slide => {
      const slideHtml = `
        <div class="slide" data-id="${slide.id}">
          <img src="${slide.image}" alt="${slide.title}">
          <h3>${slide.title}</h3>
          <p>${slide.description}</p>
        </div>
      `;
      $('.slider').slick('slickAdd', slideHtml);
    });
  } catch (error) {
    console.error('Failed to load slides:', error);
  }
}

// Infinite scroll pattern
$('.slider').on('edge', function(event, slick, direction) {
  if (direction === 'right') {
    loadMoreSlides();
  }
});

// Add/remove slides based on screen size
function manageResponsiveSlides() {
  const isMobile = window.innerWidth < 768;
  
  if (isMobile && !$('.mobile-only-slide').length) {
    // Add mobile-specific slides
    $('.slider').slick('slickAdd', '<div class="slide mobile-only-slide">Mobile Content</div>');
  } else if (!isMobile && $('.mobile-only-slide').length) {
    // Remove mobile-specific slides
    $('.mobile-only-slide').each(function() {
      const index = $(this).index();
      $('.slider').slick('slickRemove', index);
    });
  }
}

$(window).resize(manageResponsiveSlides);

// Update slide content without removing/adding
function updateSlideContent(slideIndex, newContent) {
  const $slides = $('.slider .slick-slide');
  const $targetSlide = $slides.eq(slideIndex);
  
  if ($targetSlide.length) {
    $targetSlide.html(newContent);
    // Trigger position recalculation if needed
    $('.slider').slick('setPosition');
  }
}

// Batch content updates
function updateMultipleSlides(updates) {
  updates.forEach(({index, content}) => {
    updateSlideContent(index, content);
  });
}

// When adding many slides, consider batching operations
function addMultipleSlides(slideDataArray) {
  // Disable transitions during bulk operations
  $('.slider').slick('slickSetOption', 'useCSS', false, false);
  
  slideDataArray.forEach(slideData => {
    const slideHtml = createSlideHtml(slideData);
    $('.slider').slick('slickAdd', slideHtml);
  });
  
  // Re-enable transitions
  $('.slider').slick('slickSetOption', 'useCSS', true, true);
}

// Helper function
function createSlideHtml(data) {
  return `
    <div class="slide" data-id="${data.id}">
      <img src="${data.image}" alt="${data.title}">
      <h3>${data.title}</h3>
      <p>${data.description}</p>
    </div>
  `;
}