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

@section('content')
    @php
        $breadcrumbs = [
            [
                'title' => $menu_index['name'] ?? '',
                'url' => $menu_index['url'] ?? 'javascript:void(0)',
            ],
            [
                'title' => __('frontend::lang.products.all_category') ?? '',
                'url' => $menu_products['url'] ?? 'javascript:void(0)',
            ],
        ];

        if (!empty($main_caregories['name'])) {
            $breadcrumbs[] = [
                'title' => $main_caregories['name'] ?? '',
                'url' => $main_caregories['url'] ?? 'javascript:void(0)',
            ];
        }

        if (!empty($sub_caregories['name'])) {
            $breadcrumbs[] = [
                'title' => $sub_caregories['name'] ?? '',
                'url' => $sub_caregories['url'] ?? 'javascript:void(0)',
            ];
        }

        if (!empty($product['name'])) {
            $breadcrumbs[] = [
                'title' => $product['name'] ?? '',
                'url' => $product['url'] ?? 'javascript:void(0)',
            ];
        }
    @endphp
    <x-frontend::section.breadcrumb :breadcrumbs="$breadcrumbs" />
    <section class="sect-product-category-title">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h4 class="product-card-title">{{ $product['name'] ?? '' }}</h4>
                    <p>{!! $product['desc'] ?? '' !!}</p>
                </div>
            </div>
        </div>
    </section>
    <section class="sect-product-category">
        <div class="container">
            <div class="row">
                <livewire:frontend::section.sidebar title="{{ $menu_products['name'] ?? '' }}" />
                <div class="col-lg-9">
                    @if (!empty($product['gallery'][0]))
                        <div class="sect-product-gallery">
                            <div class="project-gallery">
                                <div class="swiper gallery-top">
                                    <div class="swiper-wrapper">
                                        @foreach ($product['gallery'] as $g)
                                            <div class="swiper-slide">
                                                <div class="swiper-zoom-container">
                                                    @if (str_contains($g['image'], '.mp4'))
                                                        <video src="{{ asset($g['image']) }}" autoplay loop muted></video>
                                                    @else
                                                        <img src="{{ check_file(!empty($g['image']) ? asset($g['image']) : '') }}" alt="{{ $g['name'] ?? '' }}">
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper gallery-thumbs mt-2">
                                    <div class="swiper-wrapper">
                                        @foreach ($product['gallery'] as $g)
                                            <div class="swiper-slide">
                                                @if (str_contains($g['image'], '.mp4'))
                                                    <video src="{{ asset($g['image']) }}" autoplay loop muted></video>
                                                @else
                                                    <img src="{{ check_file(!empty($g['image']) ? asset($g['image']) : '') }}" alt="{{ $g['name'] ?? '' }}">
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="swiper-button-next-thumb"></div>
                                <div class="swiper-button-prev-thumb"></div>
                            </div>
                        </div>
                    @endif
                    @if (!empty($product['detail']))
                        <div class="col-md-12 sect-product-detail-content-right">
                            {!! $product['detail'] !!}
                            <div class="product-details-btn text-center">
                                <div class="d-flex justify-content-center gap-3 flex-wrap">
                                    <a class="btn btn-view-more" href="{{ $menu_contact['url'] ?? 'javascript:void(0)' }}">
                                        {{ $menu_contact['name'] ?? '' }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    @if (!empty($product['related'][0]))
        <section class="sect-related-products">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 headbar text-left m-b-20 m-t-20">
                        <h2 class="htitle m-b-0">{{ __('frontend::lang.products.related_products') }}</h2>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 no-padding">
                        @if (count($product['related']) <= 4)
                            <div class="row">
                                @foreach ($product['related'] as $p)
                                    <div class="col-12 col-sm-3 mb-4 mt-3">
                                        @php
                                            $image = check_file('');
                                            if (!empty($p['gallery'][0])) {
                                                foreach ($p['gallery'] as $g) {
                                                    if (!str_contains($g['image'], '.mp4')) {
                                                        $image = !empty($g['image']) ? check_file(asset($g['image'])) : check_file('');
                                                        break;
                                                    }
                                                }
                                            }
                                        @endphp
                                        <x-frontend::card.product :name="$p['name']" :image="$image" :url="$p['url']" />
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="carousel product-slide" data-items="4" data-margin="0" data-dots="false">
                                @foreach ($product['related'] as $p)
                                    @php
                                        $image = check_file('');
                                        if (!empty($p['gallery'][0])) {
                                            foreach ($p['gallery'] as $g) {
                                                if (!str_contains($g['image'], '.mp4')) {
                                                    $image = !empty($g['image']) ? asset($g['image']) : check_file('');
                                                    break;
                                                }
                                            }
                                        }
                                    @endphp
                                    <x-frontend::card.product :name="$p['name']" :image="$image" :url="$p['url']" />
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif
    @if (!empty($recently_viewed['list'][0]))
        <section class="sect-recently-products">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 headbar text-left m-b-20 m-t-20">
                        <h2 class="htitle m-b-0">{{ __('frontend::lang.products.recently_viewed') }}</h2>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 no-padding">
                        @if (count($recently_viewed['list']) <= 4)
                            <div class="row">
                                @foreach ($recently_viewed['list'] as $p)
                                    <div class="col-12 col-sm-3 mb-4 mt-3">
                                        @php
                                            $image = check_file('');
                                            if (!empty($p['gallery'][0])) {
                                                foreach ($p['gallery'] as $g) {
                                                    if (!str_contains($g['image'], '.mp4')) {
                                                        $image = !empty($g['image']) ? check_file(asset($g['image'])) : check_file('');
                                                        break;
                                                    }
                                                }
                                            }
                                        @endphp
                                        <x-frontend::card.product :name="$p['name']" :image="$image" :url="$p['url']" />
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="carousel product-slide" data-items="4" data-margin="0" data-dots="false">
                                @foreach ($recently_viewed['list'] as $p)
                                    @php
                                        $image = check_file('');
                                        if (!empty($p['gallery'][0])) {
                                            foreach ($p['gallery'] as $g) {
                                                if (!str_contains($g['image'], '.mp4')) {
                                                    $image = !empty($g['image']) ? check_file(asset($g['image'])) : check_file('');
                                                    break;
                                                }
                                            }
                                        }
                                    @endphp
                                    <x-frontend::card.product :name="$p['name']" :image="$image" :url="$p['url']" />
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection

@section('scripts')
    <!-- Swiper CSS/JS -->
    <link href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

    <!-- GLightbox CSS/JS -->
    <link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {

            /* ================== Swiper Gallery ================== */
            const galleryThumbs = new Swiper(".gallery-thumbs", {
                spaceBetween: 10,
                slidesPerView: 4, // แสดง 4 thumbnails ต่อครั้ง
                watchSlidesProgress: true,
                freeMode: true,
                navigation: {
                    nextEl: ".swiper-button-next-thumb",
                    prevEl: ".swiper-button-prev-thumb",
                },
                on: {
                    init: function() {
                        // อัปเดต navigation buttons หลังจาก init
                        this.navigation.init();
                        this.navigation.update();
                    },
                    slideChange: function() {
                        // อัปเดต navigation buttons หลังจากเปลี่ยนสไลด์
                        this.navigation.update();
                    }
                },
                breakpoints: {
                    // รองรับ responsive
                    320: {
                        slidesPerView: 2,
                        spaceBetween: 5
                    },
                    640: {
                        slidesPerView: 3,
                        spaceBetween: 8
                    },
                    768: {
                        slidesPerView: 4,
                        spaceBetween: 10
                    }
                }
            });

            const galleryTop = new Swiper(".gallery-top", {
                spaceBetween: 10,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                thumbs: {
                    swiper: galleryThumbs,
                },
                zoom: {
                    enabled: true,
                    maxRatio: 3,
                    minRatio: 1,
                },
            });

            // Hover zoom functionality
            const gallerySlides = document.querySelectorAll('.gallery-top .swiper-slide');

            gallerySlides.forEach(slide => {
                const img = slide.querySelector('img');
                const zoomContainer = slide.querySelector('.swiper-zoom-container');

                if (img && zoomContainer) {
                    let isZoomed = false;
                    let zoomLevel = 1;
                    const maxZoom = 3;
                    const minZoom = 1;

                    // Mouse enter - start zoom
                    slide.addEventListener('mouseenter', (e) => {
                        if (!isZoomed) {
                            const rect = slide.getBoundingClientRect();
                            const x = e.clientX - rect.left;
                            const y = e.clientY - rect.top;

                            // Set transform origin to mouse position
                            zoomContainer.style.transformOrigin = `${x}px ${y}px`;
                            zoomContainer.style.transform = `scale(${maxZoom})`;
                            isZoomed = true;
                        }
                    });

                    // Mouse move - update zoom center
                    slide.addEventListener('mousemove', (e) => {
                        if (isZoomed) {
                            const rect = slide.getBoundingClientRect();
                            const x = e.clientX - rect.left;
                            const y = e.clientY - rect.top;

                            // Update transform origin to follow mouse
                            zoomContainer.style.transformOrigin = `${x}px ${y}px`;
                        }
                    });

                    // Mouse leave - reset zoom
                    slide.addEventListener('mouseleave', () => {
                        zoomContainer.style.transform = 'scale(1)';
                        zoomContainer.style.transformOrigin = 'center center';
                        isZoomed = false;
                    });
                }
            });
        });
    </script>
@endsection