@extends('frontend::layouts.master')
@section('content')

<!-- <div class="swiper hero-slider swiper-fade">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="#"><img src="{{ Module::asset('frontend:images/head-banner/03.jpg') }}" alt=""></a>
            <div class="slide-content">
                <div class="container">
                    <h2 style="opacity:0;">Cut electricity costs, CO₂ emissions, and strengthen BCP — solve all your
                        energy challenges
                        with solar power.</h2>
                    <div class="bottom-bar m-t-40">
                        <a href="#" class="btn btn-left">Get a free consultation</a>
                        <a href="{{ route('frontend.use-case') }}" class="btn btn-right">See case studies</a>
                    </div>

                </div>
            </div>
        </div>
        <div class="swiper-slide swiper-slide-video">
            <div id="youtube-player-container"></div>
        </div>
    </div> -->

    <!-- Pagination -->
    <!-- <div class="swiper-pagination"></div> -->
    <!-- Navigation buttons -->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div> -->

<section class="no-padding">
    <nav class="breadcrumb-container">
        <div class="container">
            <ul class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('frontend.index') }}">Home</a>
                </li>
                <li class="breadcrumb-item active">
                    <a href="#">All use case</a>
                </li>
            </ul>
        </div>
    </nav>
</section>

@livewire('frontend::card.use-case')

<script>
    let heroSwiper;
    let player;
    let isVideoSlide = false;
    // Wait for Swiper to be loaded
    function initHeroSlider() {
        if (typeof Swiper === 'undefined') {
            console.log('Swiper not loaded yet, waiting...');
            setTimeout(initHeroSlider, 100);
            return;
        }
        console.log('Initializing Swiper...');
        // Initialize Swiper
        heroSwiper = new Swiper('.hero-slider', {
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            loop: false, // Changed from true to false to prevent cloning
            rewind: true, // Use rewind instead of loop
            speed: 1000,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on: {
                slideChange: function() {
                    // Pause video when leaving video slide
                    if (player && typeof player.pauseVideo === 'function') {
                        try {
                            player.pauseVideo();
                        } catch (e) {
                            console.log('Error pausing video:', e);
                        }
                    }
                },
                slideChangeTransitionEnd: function() {
                    // Check if we're on video slide and player needs to be recreated
                    const activeSlide = this.slides[this.activeIndex];
                    const isVideoSlide = activeSlide && activeSlide.classList.contains(
                        'swiper-slide-video');
                    const videoSlideElement = document.querySelector('.swiper-slide-video');
                    if (isVideoSlide) {
                        console.log('📺 On video slide - checking player...');
                        // Make video slide clickable
                        if (videoSlideElement) {
                            videoSlideElement.style.pointerEvents = 'auto';
                            videoSlideElement.style.zIndex = '10';
                        }
                        // Check if player exists and is valid
                        const container = document.getElementById('youtube-player-container');
                        if (container && (!player || !player.getPlayerState)) {
                            console.log('🔄 Player lost, recreating...');
                            // Wait a bit then recreate
                            setTimeout(function() {
                                if (window.YT && window.YT.Player) {
                                    try {
                                        player = new YT.Player('youtube-player-container', {
                                            height: '100%',
                                            width: '100%',
                                            videoId: 'VLCsayze4bY',
                                            playerVars: {
                                                'enablejsapi': 1,
                                                'origin': window.location.origin,
                                                'playsinline': 1,
                                                'rel': 0,
                                                'modestbranding': 1
                                            },
                                            events: {
                                                'onReady': onPlayerReady,
                                                'onStateChange': onPlayerStateChange
                                            }
                                        });
                                        console.log('✅ Player recreated');
                                    } catch (e) {
                                        console.error('Error recreating player:', e);
                                    }
                                }
                            }, 100);
                        }
                    } else {
                        // Not on video slide - COMPLETELY hide/disable video interaction
                        console.log('📸 On image slide - COMPLETELY disabling video');
                        if (videoSlideElement) {
                            videoSlideElement.style.pointerEvents = 'none';
                            videoSlideElement.style.zIndex = '-1';
                            videoSlideElement.style.visibility = 'hidden';
                            videoSlideElement.style.opacity = '0';
                        }
                        // Also disable the container
                        const container = document.getElementById('youtube-player-container');
                        if (container) {
                            container.style.pointerEvents = 'none';
                            container.style.visibility = 'hidden';
                            container.style.opacity = '0';
                            // Disable iframe too
                            const iframe = container.querySelector('iframe');
                            if (iframe) {
                                iframe.style.pointerEvents = 'none';
                                iframe.style.visibility = 'hidden';
                            }
                        }
                        // Pause video if playing
                        if (player && typeof player.pauseVideo === 'function') {
                            try {
                                player.pauseVideo();
                                console.log('⏸️ Video paused (not on video slide)');
                            } catch (e) {
                                console.log('Error pausing video:', e);
                            }
                        }
                    }
                }
            }
        });
        console.log('✅ Swiper initialized successfully!');
        console.log('Swiper autoplay status:', heroSwiper.autoplay);
        // Load YouTube IFrame API
        if (!window.YT) {
            console.log('📺 Loading YouTube IFrame API...');
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        } else {
            console.log('📺 YouTube API already loaded');
            // If API is already loaded, initialize player directly
            if (window.YT && window.YT.Player) {
                window.onYouTubeIframeAPIReady();
            }
        }
    }
    // YouTube API ready callback
    window.onYouTubeIframeAPIReady = function() {
        // Prevent multiple player creation
        if (player) {
            console.log('⚠️ Player already exists, skipping creation');
            return;
        }
        console.log('🎬 YouTube API ready - creating player...');
        console.log('heroSwiper at API ready:', !!heroSwiper);
        console.log('Current origin:', window.location.origin);
        try {
            player = new YT.Player('youtube-player-container', {
                height: '100%',
                width: '100%',
                videoId: 'VLCsayze4bY',
                playerVars: {
                    'enablejsapi': 1,
                    'origin': window.location.origin,
                    'playsinline': 1,
                    'rel': 0,
                    'modestbranding': 1
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
            console.log('✅ YouTube player created successfully');
        } catch (error) {
            console.error('❌ Error creating YouTube player:', error);
        }
    };

    function onPlayerReady(event) {
        console.log('✅ YouTube player ready and listening for state changes');
        console.log('Player object:', player);
        console.log('Testing event listener...');
        // Test that the state change listener is working
        console.log('🎯 Click on the video to play it, and watch for state changes below...');
    }

    function onPlayerStateChange(event) {
        console.log('═══════════════════════════════════════');
        console.log('🎬 Player state changed!');
        console.log('Event data:', event.data);
        console.log('YT.PlayerState.PLAYING:', YT.PlayerState.PLAYING);
        console.log('YT.PlayerState.PAUSED:', YT.PlayerState.PAUSED);
        console.log('YT.PlayerState.ENDED:', YT.PlayerState.ENDED);
        console.log('heroSwiper exists?', !!heroSwiper);
        console.log('═══════════════════════════════════════');
        if (!heroSwiper) {
            console.log('❌ heroSwiper not found');
            return;
        }
        // YT.PlayerState.PLAYING = 1
        if (event.data === 1 || event.data === YT.PlayerState.PLAYING) {
            console.log('▶️▶️▶️ Video is PLAYING - stopping slider ▶️▶️▶️');
            // FORCE STOP the slider with all methods
            try {
                // Method 1: Stop autoplay
                if (heroSwiper.autoplay) {
                    heroSwiper.autoplay.stop();
                    console.log('✅ Method 1: autoplay.stop() called');
                }
                // Method 2: Pause autoplay
                if (heroSwiper.autoplay) {
                    heroSwiper.autoplay.pause();
                    console.log('✅ Method 2: autoplay.pause() called');
                }
                // Method 3: Disable autoplay in params
                if (heroSwiper.params) {
                    heroSwiper.params.autoplay = false;
                    console.log('✅ Method 3: params.autoplay = false');
                }
                // Method 4: Destroy autoplay module
                if (heroSwiper.autoplay) {
                    heroSwiper.autoplay.running = false;
                    heroSwiper.autoplay.paused = true;
                    console.log('✅ Method 4: Force set running=false, paused=true');
                }
                console.log('✅✅✅ Slider stopped successfully ✅✅✅');
            } catch (error) {
                console.error('❌ Error stopping slider:', error);
            }
        }
        // YT.PlayerState.PAUSED = 2 or ENDED = 0
        else if (event.data === 2 || event.data === 0 || event.data === YT.PlayerState.PAUSED || event.data === YT
            .PlayerState.ENDED) {
            console.log('⏸️ Video PAUSED/ENDED - resuming slider');
            try {
                // Re-enable autoplay
                if (heroSwiper.params) {
                    heroSwiper.params.autoplay = {
                        delay: 2000,
                        disableOnInteraction: false,
                    };
                }
                if (heroSwiper.autoplay) {
                    heroSwiper.autoplay.start();
                    console.log('✅ Slider resumed');
                }
            } catch (error) {
                console.error('❌ Error resuming slider:', error);
            }
        }
    }
    // Initialize when DOM is ready
    console.log('🚀 Script loaded, readyState:', document.readyState);
    if (document.readyState === 'loading') {
        console.log('⏳ Waiting for DOM...');
        document.addEventListener('DOMContentLoaded', initHeroSlider);
    } else {
        console.log('✅ DOM ready, initializing...');
        initHeroSlider();
    }
</script>
@endsection