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

<x-breadcrumb title="{{ end($breadcrumbs)['name'] ?? '' }}" subtitle="{{ end($breadcrumbs)['desc'] ?? '' }}" :breadcrumbs=$breadcrumbs :active="count($breadcrumbs) - 1" backgroundImage=""/>

<section class="page-company-information p-t-40 p-b-0">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 m-b-20">
                <h2 class="section-title text-center">{!! $company['name'] ?? '' !!}</h2>
                {!! $company['desc'] ?? '' !!}
            </div>
        </div>
        <div class="row m-b-60">
            <div class="col-xs-12 col-sm-12 col-md-12 cleft">
                @if (!empty($company['gallery']))
                    <div class="company-gallery">
                        <div class="swiper company-gallery-main">
                            <div class="swiper-wrapper">
                                @foreach ($company['gallery'] as $image)
                                    @php
                                        $isVideo = false;
                                        if (is_string($image['image'])) {
                                            $ext = strtolower(pathinfo(parse_url($image['image'], PHP_URL_PATH), PATHINFO_EXTENSION));
                                            $isVideo = $ext === 'mp4';
                                        }
                                    @endphp
                                    <div class="swiper-slide">
                                        @if ($isVideo)
                                            <video class="w100" controls>
                                                <source src="{{ $image['image'] }}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        @else
                                            <img src="{{ $image['image'] }}" class="w100"
                                                alt="Company gallery image {{ $loop->iteration }}">
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            <div class="swiper-button-prev company-gallery-button-prev"></div>
                            <div class="swiper-button-next company-gallery-button-next"></div>
                        </div>
                        <div class="swiper company-gallery-thumbs">
                            <div class="swiper-wrapper">
                                @foreach ($company['gallery'] as $image)
                                    @php
                                        $isVideo = false;
                                        if (is_string($image['image'])) {
                                            $ext = strtolower(pathinfo(parse_url($image['image'], PHP_URL_PATH), PATHINFO_EXTENSION));
                                            $isVideo = $ext === 'mp4';
                                        }
                                    @endphp
                                    <div class="swiper-slide">
                                        @if ($isVideo)
                                            <video class="w100" muted>
                                                <source src="{{ $image['image'] }}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        @else
                                            <img src="{{ $image['image'] }}" class="w100"
                                                alt="Company gallery thumbnail {{ $loop->iteration }}">
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 m-t-40">
                {!! $company['detail'] ?? '' !!}
            </div>
        </div>
        <div class="page-service-button m-t-60 m-b-40">
            <div class="text-center">
            <a href="{{ $url['contact'] ?? '' }}" class="btn btn-lg btn-outline">{{ __('frontend::frontend.btn.free_consultation') }}</a>
            <a href="{{ $url['request_document'] ?? '' }}" class="btn btn-lg m-l-20">{{ __('frontend::frontend.btn.download_materials') }}</a>
            </div>
        </div>
        <div>
            {!! $company['location'] ?? '' !!}
            <div>
                {!! $company['text'] ?? '' !!}
            </div>
        </div>
    </div>
    @if (!empty($page_init['contact']['gmap']))
        <div class="w100 m-t-40">
            <div class="mapWrap">
                {!! $page_init['contact']['gmap'] ?? '' !!}
            </div>
        </div>
    @endif
    
</section>

<script>
    function initCompanyGallery() {
        if (typeof Swiper === 'undefined') {
            setTimeout(initCompanyGallery, 100);
            return;
        }

        const mainGallery = document.querySelector('.company-gallery-main');
        const thumbsGallery = document.querySelector('.company-gallery-thumbs');

        if (!mainGallery || !thumbsGallery) {
            return;
        }

        if (mainGallery.dataset.swiperInitialized === 'true') {
            return;
        }

        const thumbsSwiper = new Swiper('.company-gallery-thumbs', {
            spaceBetween: 12,
            slidesPerView: 3.5,
            freeMode: true,
            watchSlidesProgress: true,
            breakpoints: {
                0: {
                    slidesPerView: 3.2,
                },
                576: {
                    slidesPerView: 4,
                }
            }
        });

        new Swiper('.company-gallery-main', {
            spaceBetween: 16,
            loop: true,
            navigation: {
                nextEl: '.company-gallery-button-next',
                prevEl: '.company-gallery-button-prev',
            },
            thumbs: {
                swiper: thumbsSwiper,
            }
        });

        mainGallery.dataset.swiperInitialized = 'true';
        thumbsGallery.dataset.swiperInitialized = 'true';
    }

    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
    function initCompanyInformationPage() {
        console.log('✅ Initialising company information page components');
        initHeroSlider();
        initCompanyGallery();
    }

    console.log('🚀 Script loaded, readyState:', document.readyState);
    if (document.readyState === 'loading') {
        console.log('⏳ Waiting for DOM...');
        document.addEventListener('DOMContentLoaded', initCompanyInformationPage);
    } else {
        console.log('✅ DOM ready, initializing...');
        initCompanyInformationPage();
    }
</script>
@endsection