@extends('frontend::layouts.master')
@section('content')
    <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="#">Service</a>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
    @livewire('frontend::card.service')
    <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>
    <script>
        function equalHeightCards() {
            let maxH = 0;

            // รีเซ็ตก่อน
            document.querySelectorAll('.service-ctrl-carousel .card').forEach(card => {
                card.style.height = 'auto';
            });

            // หาความสูงที่มากที่สุด
            document.querySelectorAll('.service-ctrl-carousel .card').forEach(card => {
                let h = card.offsetHeight;
                if (h > maxH) maxH = h;
            });

            // เซ็ตความสูงให้เท่ากัน
            document.querySelectorAll('.service-ctrl-carousel .card').forEach(card => {
                card.style.height = maxH + 'px';
            });
        }

        // เรียกใช้หลัง Flickity โหลด หรือหลัง window load
        window.addEventListener('load', function() {
            equalHeightCards();
        });

        // เรียกใช้เมื่อ resize (สำคัญมาก)
        window.addEventListener('resize', function() {
            equalHeightCards();
        });
    </script>
@endsection