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

@section('content')
    <!-- Lightbox Popup -->
    @if (!empty($landing))
        @livewire('frontend::list.landing', ['landing' => $landing])
    @endif
    
    <!-- Slider Section -->
    @if (!empty($banners))
        <div id="slider" class="carousel" data-items="1" data-autoplay="7000" data-hover-pause="false">
            @foreach ($banners as $banner)
                @if ($banner['type'] == 'image')
                    <div class="slide">
                        <a href="{{ $banner['url'] ?? '' }}"><img src="{{ asset($banner['src'] ?? '') }}" alt=""></a>
                    </div>
                @endif
                @if ($banner['type'] == 'youtube')
                    <div class="slide">
                        <iframe
                            src="https://www.youtube.com/embed/{{ $banner['src'] ?? '' }}?autoplay=1&mute=1&si=YvQC-mg50KChYMEP"
                            title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    </div>
                @endif
                @if ($banner['type'] == 'video')
                    <div class="slide">
                        <video autoplay muted loop playsinline controls style="width: 100%;border-radius: 12px;">
                            <source src="{{ $banner['src'] ?? '' }}" type="video/mp4">
                        </video>
                    </div>
                @endif
            @endforeach
        </div>
    @endif

    <!-- About Section -->
    @if (!empty($about['dt']['detail']))
        <section class="sect-about-index">
            <div class="container">
                <div class="row">
                    {!! $about['dt']['detail'] ?? '' !!}
                    <div class="col-xs-12 col-sm-12 col-md-6 col-detail btn-more-about">
                        <a href="{{ $about['dt']['url'] ?? '' }}"
                            class="btn btn-view-more">{{ __('frontend::text.know_us_more') }}</a>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Product Section -->
    @if (!empty($products['list']))
        <section class="sect-product"
            style="background: url('{{ Module::asset('frontend:images/bg-product.png') }}') no-repeat center center;background-size: cover;">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 headbar text-center m-b-20">
                        <!-- <p class="product-title-catalog m-b-10 text-light">Catalog : เครื่องเหล็ก</p> -->
                        {!! mwz_getTextString($products['menu']['desc'] ?? '') !!}
                        <a href="{{ $products['url'] ?? '' }}" class="btn-right">{{ __('frontend::text.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="4" data-margin="0" data-loop="true"
                            data-dots="true">
                            @foreach ($products['list'] as $ls)
                                <a href="{{ $ls['url'] ?? '' }}" class="product-item-link">
                                    <div class="product-item">
                                        @if (!empty($ls['image']))
                                            <div class="product-image text-center">
                                                <img src="{{ asset($ls['image'] ?? '') }}" alt="">
                                            </div>
                                        @endif
                                        <div class="product-content text-center">
                                            <h4 class="product-title">{!! $ls['name'] ?? '' !!}</h4>
                                            <p class="product-title-catalog m-b-0">{{ __('frontend::text.catalog') }} : {!! $ls['name'] ?? '' !!}</p>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>
        </section>
    @endif

    <!-- client Section -->
    @if (!empty($our_customers['dt']['detail']))
        <section class="sect-client">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 headbar text-center m-b-20">
                        {!! mwz_getTextString($our_customers['menu']['desc'] ?? '') !!}
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-image">
                        {!! $our_customers['dt']['detail'] ?? '' !!}
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-detail m-t-30">
                        <a href="{{ $our_customers['url'] ?? '' }}"
                            class="btn btn-view-more">{{ __('frontend::text.see_more') }}</a>
                    </div>
                </div>
            </div>
        </section>
    @endif


    <!-- News Section -->
    @if (!empty($news['list']))
        <section class="sect-news"
            style="background: url('{{ Module::asset('frontend:images/bg-dots.jpg') }}') no-repeat center center;background-size: cover;">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 headbar m-b-40 text-center">
                        {!! mwz_getTextString($news['menu']['desc'] ?? '') !!}
                        <a href="{{ $news['url'] ?? '' }}" class="btn-right">{{ __('frontend::text.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-loop="true"
                            data-autoplay="5000" data-dots="false">
                            @foreach ($news['list'] as $ls)
                                <div class="news-item">
                                    <div class="news-image">
                                        <a href="{{ $ls['url'] ?? '' }}">
                                            <img src="{{ asset($ls['image'] ?? '') }}" alt="{{ $ls['name'] ?? '' }}">
                                        </a>

                                    </div>
                                    <div class="news-content">
                                        <h4 class="news-title">
                                            <a href="{{ $ls['url'] ?? '' }}">{!! $ls['name'] ?? '' !!}</a>
                                        </h4>
                                        <p class="news-excerpt">{!! $ls['desc'] ?? '' !!}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if (!empty($contact['menu']['desc']))
        <section class="background-sub-con text-center">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        {!! mwz_getTextString($contact['menu']['desc'] ?? '') !!}
                    </div>
                    <div class="col-lg-3"><a href="{{ $contact['url'] ?? '' }}" class="btn btn-roundeded"
                            style="background: #ffffff; color: #ea0000; border-radius: 20px;">{{ __('frontend::text.contact_us') }}</a> </div>
                </div>
            </div>
        </section>
    @endif
    
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const overlay = document.getElementById('lightboxOverlay');
            const content = document.getElementById('lightboxContent');
            const closeBtns = document.querySelectorAll('#lightboxClose, #lightboxCloseBottom');

            function openLightbox() {
                overlay.classList.add('show');
            }

            function closeLightbox() {
                overlay.classList.remove('show');
            }

            // เปิดหลังโหลดหน้า 0.5 วินาที
            setTimeout(openLightbox, 500);

            // ปิดด้วยปุ่ม
            closeBtns.forEach(btn => btn.addEventListener('click', closeLightbox));

            // ปิดด้วยคลิก overlay
            overlay.addEventListener('click', closeLightbox);

            // คลิกใน content ไม่ปิด
            content.addEventListener('click', e => e.stopPropagation());

            // กด Esc ปิด
            document.addEventListener('keydown', e => {
                if (e.key === "Escape") closeLightbox();
            });

            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();
                        });
                    }
                }
            }
        });
    </script>
@endsection