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

@section('content')
    @if (!empty($pop_up[0]) && empty($page_init['popup']))
        <div class="lightbox-overlay" id="lightboxOverlay">
            <div class="lightbox-content" id="lightboxContent">
                <button class="lightbox-close" id="lightboxClose">
                    &times;
                </button>
                <div class="lightbox-body" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                    @if ($pop_up[0]['type'] == 'image')
                        <img src="{{ $pop_up[0]['src'] ?? '' }}" alt="Popup Image" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                    @elseif ($pop_up[0]['type'] == 'video')
                        <iframe src="{{ $pop_up[0]['src'] ?? '' }}" title="Popup Video" style="width: 100%; height: 100%; min-height: 500px;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    @elseif ($pop_up[0]['type'] == 'youtube')
                        <iframe src="https://www.youtube.com/embed/{{ $pop_up[0]['src'] ?? '' }}?autoplay=1&mute=1" title="Popup YouTube" style="width: 100%; height: 100%; min-height: 500px;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    @endif
                </div>
                <div class="lightbox-footer">
                    <button class="lightbox-btn-close" id="lightboxCloseBottom">
                        {{ __('frontend::lang.btn.close') }}
                    </button>
                </div>
            </div>
        </div>
    @endif
    @if (!empty($banners))
        <div class="carousel" id="slider" data-items="1" data-autoplay="5000" data-hover-pause="false">
            @foreach ($banners as $banner)
                <div class="slide">
                    @if ($banner['type'] == 'image')
                        @if (!empty($banner['url']))
                            <a href="{{ $banner['url'] }}" target="_blank">
                        @endif
                        <img src="{{ $banner['src'] ?? '' }}" alt="{{ $banner['name'] ?? '' }}">
                        @if (!empty($banner['url']))
                            </a>
                        @endif
                    @elseif ($banner['type'] == 'youtube')
                        <iframe src="https://www.youtube.com/embed/{{ $banner['src'] ?? '' }}?autoplay=1&mute=1" title="{{ $banner['name'] ?? '' }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    @endif
                </div>
            @endforeach
        </div>
    @endif
    @if (!empty($about['detail']))
        <section class="sect-about-index" style="background: url('{{ Module::asset('frontend:images/bg-white-abscract.jpg') }}') no-repeat center center; background-size: cover;">
            <div class="container">
                <div class="row">
                    {!! $about['detail'] ?? '' !!}
                    <div class="col-xs-12 col-sm-12 col-md-12 text-center" style="margin-top: 20px;">
                        <a class="btn" href="{{ $link_about['url'] ?? '' }}">
                            <span>{{ __('frontend::lang.btn.know_us_more') }}</span>
                            <i class="icon-arrow-right-circle">
                                <span style="display:none;">-</span>
                            </i>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if (!empty($products['list'][0]))
        <section class="sect-about-index" style="background: url('{{ Module::asset('frontend:images/bg-product-abscract.jpg') }}') no-repeat center center / cover; background-attachment: fixed;">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 headbar text-center m-b-20">
                        {!! $link_products['desc'] ?? '' !!}
                        <a class="btn-right " href="{{ $link_products['url'] ?? 'javascript:void(0)' }}">
                            {{ __('frontend::lang.btn.view_all') }}
                            <i class="fa fa-arrow-circle-right m-l-10"></i>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 no-padding">
                        <div class="carousel product-slide" data-items="3" data-margin="20" data-loop="fasle" data-autoplay="false" data-dots="false">
                            @foreach ($products['list'] as $product)
                                <x-frontend::card.product :name="$product['name']" :desc="$product['desc']" :image="$product['image']" :url="$product['url']" :showDesc="true" />
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if (!empty($news['list'][0]))
        <section class="sect-news">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 headbar m-b-40 text-left">
                        {!! $link_news['desc'] ?? '' !!}
                        <a class="btn-right text-white" href="{{ $link_news['url'] ?? 'javascript:void(0)' }}">
                            {{ __('frontend::lang.btn.view_all') }}
                            <i class="fa fa-arrow-circle-right m-l-10"></i>
                        </a>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="news-slider carousel" data-items="3" data-margin="20" data-autoplay="false" data-dots="false">
                            @foreach ($news['list'] as $news)
                                <x-frontend::card.news :name="$news['name']" :desc="$news['desc']" :image="$news['image']" :url="$news['url']" />
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if (!empty($link_contact['status']))
        <section class="background-sub-con text-center">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        {!! $link_contact['desc'] ?? '' !!}
                    </div>
                    <div class="col-lg-3">
                        <a class="btn btn-roundeded" href="{{ $link_contact['url'] ?? 'javascript:void(0)' }}" style="background: #ffffff; color: #3b67bc; border-radius: 20px;">
                            {{ __('frontend::lang.btn.contact_us') }}
                        </a>
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (window.jQuery) {
                const $slider = window.jQuery('#slider.carousel');

                if ($slider.length && typeof $slider.flickity === 'function') {
                    const resumeAutoPlay = () => {
                        setTimeout(() => {
                            if ($slider.data('flickity')) {
                                $slider.flickity('playPlayer');
                            }
                        }, 120);
                    };

                    const bindResume = () => {
                        $slider.on('click', '.slide a', resumeAutoPlay);
                    };

                    if ($slider.data('flickity')) {
                        bindResume();
                    } else {
                        $slider.on('ready.flickity', () => {
                            bindResume();
                            resumeAutoPlay();
                        });
                    }
                }

                // แก้ไขปัญหาการแสดงผลของ item แรกใน product-slide carousel
                const $productSlides = window.jQuery('.product-slide.carousel');
                $productSlides.each(function() {
                    const $carousel = window.jQuery(this);
                    
                    // รอให้ Flickity โหลดเสร็จ
                    if ($carousel.hasClass('carousel-loaded')) {
                        fixFirstItem($carousel);
                    } else {
                        $carousel.on('ready.flickity', function() {
                            fixFirstItem($carousel);
                        });
                    }
                });

                function fixFirstItem($carousel) {
                    const flickity = $carousel.data('flickity');
                    if (flickity && flickity.selectedIndex === 0) {
                        // รีเซ็ตตำแหน่งของ carousel เพื่อให้ item แรกแสดงได้ถูกต้อง
                        setTimeout(() => {
                            $carousel.flickity('select', 0);
                        }, 100);
                    }
                }
            }
        });
    </script>
@endsection