/**
 * Panel Services Slider Functionality
 * This script adds carousel/slider functionality to the panel-services section
 * WITHOUT altering any existing styles
 */

(function() {
    'use strict';

    let currentSlide = 0;
    let totalSlides = 0;
    let slider = null;
    let cards = [];
    let dotsContainer = null;
    let autoSlideInterval = null;

    // Wait for DOM to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    function init() {
        // Wait a bit for other scripts to load
        setTimeout(function() {
            setupSlider();
        }, 200);
    }

    function setupSlider() {
        slider = document.querySelector('.pannel-services__slider');
        if (!slider) {
            console.log('Slider container not found');
            return;
        }

        cards = Array.from(slider.querySelectorAll('.card'));
        totalSlides = cards.length;

        if (totalSlides === 0) {
            console.log('No cards found in slider');
            return;
        }

        // Add minimal required styles for slider functionality
        addSliderStyles();

        // Create navigation dots
        createDots();

        // Create navigation arrows (optional)
        createArrows();

        // Show first slide
        showSlide(0);

        // Start auto-slide (optional - remove if you don't want auto-play)
        startAutoSlide();

        // Add keyboard navigation
        document.addEventListener('keydown', handleKeyPress);
    }

    function addSliderStyles() {
        // Check if styles already exist
        if (document.getElementById('panel-slider-styles')) return;

        const style = document.createElement('style');
        style.id = 'panel-slider-styles';
        style.textContent = `
            /* Slider container positioning */
            .pannel-services__slider {
                position: relative;
                overflow: hidden;
            }

            /* Hide all cards by default */
            .pannel-services__slider .card {
                display: none !important;
                opacity: 0;
                transition: opacity 0.5s ease-in-out;
            }

            /* Show active cards */
            .pannel-services__slider .card.active-slide {
                display: block !important;
                opacity: 1;
            }

            /* Slider wrapper for cards */
            .slider-wrapper {
                display: flex;
                gap: 20px;
                justify-content: center;
                align-items: stretch;
                min-height: 400px;
            }

            /* Navigation arrows */
            .slider-arrow {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background: rgba(255, 255, 255, 0.9);
                border: none;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                z-index: 10;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                transition: all 0.3s ease;
                font-size: 20px;
                color: #333;
            }

            .slider-arrow:hover {
                background: rgba(255, 255, 255, 1);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                transform: translateY(-50%) scale(1.1);
            }

            .slider-arrow.prev {
                left: 20px;
            }

            .slider-arrow.next {
                right: 20px;
            }

            /* Carousel dots */
            .slider-dots {
                display: flex;
                justify-content: center;
                gap: 10px;
                margin-top: 30px;
                margin-bottom: 20px;
            }

            .slider-dots .dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: #ccc;
                cursor: pointer;
                transition: all 0.3s ease;
                border: none;
                padding: 0;
            }

            .slider-dots .dot:hover {
                background: #999;
                transform: scale(1.2);
            }

            .slider-dots .dot.active {
                background: #667eea;
                width: 30px;
                border-radius: 6px;
            }

            /* Responsive adjustments */
            @media (max-width: 768px) {
                .slider-arrow {
                    width: 40px;
                    height: 40px;
                    font-size: 16px;
                }

                .slider-arrow.prev {
                    left: 10px;
                }

                .slider-arrow.next {
                    right: 10px;
                }
            }
        `;
        document.head.appendChild(style);
    }

    function createDots() {
        // Check if dots already exist
        let existingDots = document.querySelector('.slider-dots');
        if (existingDots) {
            existingDots.remove();
        }

        dotsContainer = document.createElement('div');
        dotsContainer.className = 'slider-dots';

        for (let i = 0; i < totalSlides; i++) {
            const dot = document.createElement('button');
            dot.className = 'dot';
            dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
            dot.addEventListener('click', function() {
                showSlide(i);
                stopAutoSlide(); // Stop auto-slide when user manually navigates
            });
            dotsContainer.appendChild(dot);
        }

        // Insert dots before the button-row
        const buttonRow = slider.parentNode.querySelector('.button-row');
        if (buttonRow) {
            slider.parentNode.insertBefore(dotsContainer, buttonRow);
        } else {
            slider.parentNode.appendChild(dotsContainer);
        }
    }

    function createArrows() {
        // Check if arrows already exist
        if (document.querySelector('.slider-arrow')) return;

        // Previous arrow
        const prevArrow = document.createElement('button');
        prevArrow.className = 'slider-arrow prev';
        prevArrow.innerHTML = '<i class="fas fa-chevron-left"></i>';
        prevArrow.setAttribute('aria-label', 'Previous slide');
        prevArrow.addEventListener('click', function() {
            previousSlide();
            stopAutoSlide();
        });

        // Next arrow
        const nextArrow = document.createElement('button');
        nextArrow.className = 'slider-arrow next';
        nextArrow.innerHTML = '<i class="fas fa-chevron-right"></i>';
        nextArrow.setAttribute('aria-label', 'Next slide');
        nextArrow.addEventListener('click', function() {
            nextSlide();
            stopAutoSlide();
        });

        slider.appendChild(prevArrow);
        slider.appendChild(nextArrow);
    }

    function showSlide(index) {
        // Ensure index is within bounds
        if (index < 0) {
            currentSlide = totalSlides - 1;
        } else if (index >= totalSlides) {
            currentSlide = 0;
        } else {
            currentSlide = index;
        }

        // Hide all cards
        cards.forEach(function(card) {
            card.classList.remove('active-slide');
        });

        // Show current card
        if (cards[currentSlide]) {
            cards[currentSlide].classList.add('active-slide');
        }

        // Update dots
        updateDots();
    }

    function updateDots() {
        if (!dotsContainer) return;

        const dots = dotsContainer.querySelectorAll('.dot');
        dots.forEach(function(dot, index) {
            if (index === currentSlide) {
                dot.classList.add('active');
            } else {
                dot.classList.remove('active');
            }
        });
    }

    function nextSlide() {
        showSlide(currentSlide + 1);
    }

    function previousSlide() {
        showSlide(currentSlide - 1);
    }

    function startAutoSlide() {
        // Auto-advance every 5 seconds
        autoSlideInterval = setInterval(function() {
            nextSlide();
        }, 5000);
    }

    function stopAutoSlide() {
        if (autoSlideInterval) {
            clearInterval(autoSlideInterval);
            autoSlideInterval = null;
        }
    }

    function handleKeyPress(e) {
        if (e.key === 'ArrowLeft') {
            previousSlide();
            stopAutoSlide();
        } else if (e.key === 'ArrowRight') {
            nextSlide();
            stopAutoSlide();
        }
    }

    // Pause auto-slide when user hovers over slider
    if (slider) {
        slider.addEventListener('mouseenter', stopAutoSlide);
        slider.addEventListener('mouseleave', startAutoSlide);
    }

    // Expose functions globally if needed
    window.panelServicesSlider = {
        next: nextSlide,
        previous: previousSlide,
        goTo: showSlide,
        stop: stopAutoSlide,
        start: startAutoSlide
    };

})();