@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="{{ asset('assets/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="#">Contact us</a>
                    </li>
                </ul>
            </div>
        </nav>
    </section>

    <!-- <section class="page-contact p-t-40">
        <div class="container">
            <div class="row">

                <div class="col-xs-12 col-sm-12 col-md-12 headbar m-b-40">
                    <h2 class="section-title text-center">Contact us</h2>
                </div>

            
            </div>
        </div>
    </section> -->

    <!-- Contact Section -->
    <section class="page-contact p-t-40">
        <div class="container">
            <div class="row">

                <!-- Company Information -->
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="contact-info">
                        <!-- <h3 class="contact-title">ข้อมูลบริษัท</h3> -->

                        <div class="company-details">
                            <div class="company-logo">
                                <img src="{{ asset('assets/frontend/images/logo.png') }}" alt="Pro Part Distributor Logo"
                                    class="img-responsive">
                            </div>

                            <h4 class="company-name">ITC ENEX (Thailand) Co., Ltd.</h4>
                            <p class="company-desc">We provide the renewable energy generation and energy conservation
                                business services</p>
                        </div>

                        <div class="contact-details">
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <i class="icon-map-pin"></i>
                                </div>
                                <div class="contact-text">
                                    <h5>Address</h5>
                                    <p>159/16 Serm-MitTower, 10th Floor, Room No. 1016/1, Sukhumvit 21 Road (Asoke), Khlong
                                        Toei Nuea Subdistrict, Wattana District, Bangkok 10110</p>
                                </div>
                            </div>

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <i class="icon-phone"></i>
                                </div>
                                <div class="contact-text">
                                    <h5>Tel.</h5>
                                    <p><a href="tel:+6622586951">02-258-6951</a></p>
                                    <!-- <p><a href="tel:+6622586952">02-258-6952</a></p> -->
                                </div>
                            </div>

                            <!-- <div class="contact-item">
                                <div class="contact-icon">
                                    <i class="fa fa-fax"></i>
                                </div>
                                <div class="contact-text">
                                    <h5>Fax.</h5>
                                    <p><a href="fax:+6622586953">02-258-6953</a></p>
                                </div>
                            </div> -->

                            <div class="contact-item">
                                <div class="contact-icon">
                                    <i class="icon-mail"></i>
                                </div>
                                <div class="contact-text">
                                    <h5>อีเมล</h5>
                                    <p><a href="mailto:sales@itcenex.co.th">sales@itcenex.co.th</a></p>
                                </div>
                            </div>

                            <!-- <div class="contact-item">
                                <div class="contact-icon">
                                    <i class="icon-clock"></i>
                                </div>
                                <div class="contact-text">
                                    <h5>เวลาทำการ</h5>
                                    <p>จันทร์ - ศุกร์: 8:00 - 17:00 น.<br>เสาร์: 8:00 - 12:00 น.<br>อาทิตย์: ปิดทำการ</p>
                                </div>
                            </div> -->
                        </div>

                        <!-- <div class="social-links">
                            <h5>ติดตามเราได้ที่</h5>
                            <div class="social-icons social-icons-colored social-icons-rounded m-t-20">
                                <ul>
                                    <li class="social-line">
                                        <a href="">
                                            <i class="fab fa-line"></i>
                                        </a>
                                    </li>
                                    <li class="social-facebook">
                                        <a href="">
                                            <i class="fab fa-facebook-f"></i>
                                        </a>
                                    </li>
                                    <li class="social-youtube">
                                        <a href=""><i class="fab fa-youtube"></i></a>
                                    </li>
                                    <li class="social-instagram"><a href="#"><i class="fab fa-instagram"></i></a></li>
                                    <li class="social-x"><a href="#"><i class="fab fa-x-twitter"></i></a></li>

                                    <li class="social-tiktok">
                                        <a href="">
                                            <i class="fab fa-tiktok"></i>
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div> -->

                    </div>
                </div>

                <!-- Contact Form -->
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                    <div class="contact-form-container">
                        <h3 class="contact-title">Send message to us</h3>
                        <p class="contact-subtitle">Please fill in the information below, we will contact you within 24
                            hours</p>

                        <form class="contact-form" id="contactForm">
                            <div class="row">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="CompanyName">Company Name</label>
                                        <input type="text" class="form-control" id="CompanyName" name="CompanyName"
                                            required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="form-group">
                                        <label for="fullName">Full Name *</label>
                                        <input type="text" class="form-control" id="fullName" name="fullName"
                                            required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-sm-6 col-md-6">
                                    <div class="form-group">
                                        <label for="position">Position</label>
                                        <input type="text" class="form-control" id="position" name="position"
                                            required>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-6">
                                    <div class="form-group">
                                        <label for="companyLocation">Company Location</label>
                                        <input type="text" class="form-control" id="companyLocation"
                                            name="companyLocation" required>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-12 col-sm-6">
                                    <div class="form-group">
                                        <label for="email">Email *</label>
                                        <input type="email" class="form-control" id="email" name="email"
                                            required>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-6">
                                    <div class="form-group">
                                        <label for="phone">Phone Number *</label>
                                        <input type="tel" class="form-control" id="phone" name="phone"
                                            required>
                                    </div>
                                </div>
                            </div>

                            <!-- <div class="form-group">
                                <label for="subject">Subject *</label>
                                <select class="form-control" id="subject" name="subject" required>
                                    <option value="">เลือกหัวข้อ</option>
                                    <option value="general">สอบถามข้อมูลทั่วไป</option>
                                    <option value="product">สอบถามข้อมูลสินค้า</option>
                                    <option value="quotation">ขอใบเสนอราคา</option>
                                    <option value="order">สั่งซื้อสินค้า</option>
                                    <option value="support">บริการหลังการขาย</option>
                                    <option value="partnership">ความร่วมมือทางธุรกิจ</option>
                                    <option value="other">อื่นๆ</option>
                                </select>
                            </div> -->

                            <div class="form-group">
                                <label for="message">Detail Message *</label>
                                <textarea class="form-control" id="message" name="message" rows="6" placeholder="your message" required></textarea>
                            </div>

                            <div class="form-group">
                                <div class="checkbox-group">
                                    <input type="checkbox" id="privacy-policy" name="privacy-policy" required>
                                    <label for="privacy-policy">
                                        I agree to the <a href="{{ route('frontend.pdpa') }}" target="_blank"
                                            class="policy-link text-link">Privacy Policy</a> and <a
                                            href="{{ route('frontend.terms-and-conditions') }}" target="_blank"
                                            class="condition-link text-link">Terms & Conditions</a> of the website.
                                    </label>
                                </div>
                            </div>

                            <!-- reCAPTCHA -->
                            <div class="form-group">
                                <div class="recaptcha-container">
                                    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY_HERE"></div>
                                    <p class="recaptcha-note">Please confirm that you are not a bot</p>
                                </div>
                            </div>

                            <div class="form-actions">
                                <button type="submit" class="btn btn-submit">
                                    <i class="icon-send"></i>
                                    send data
                                </button>
                                <!-- <button type="reset" class="btn btn-reset btn-outline">
                                    <i class="icon-refresh"></i>
                                    clear data
                                </button> -->
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Google Maps Section -->
    <section class="sect-map">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
                    <div class="map-container">
                        <div class="map-wrapper">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.630426139284!2d100.56163699999999!3d13.740811!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29fb91651bbdd%3A0x33ed3135e686f215!2sITC%20ENEX%20(Thailand)%20Co.%2C%20LTD.!5e0!3m2!1sth!2sth!4v1758084583744!5m2!1sth!2sth"
                                width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <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