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

@push('styles')
    <link href="{{ asset('modules/frontend/plugins/product-script/product-style.css') }}" rel="stylesheet">
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="bg-med-gray text-med-dark antialiased">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="py-4">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <nav class="flex text-xs sm:text-sm text-gray-500 overflow-x-auto" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-1 md:space-x-3 whitespace-nowrap">
                            <li class="inline-flex items-center">
                                <a class="hover:text-med-primary transition" href="{{ $link_index['url'] ?? 'javascript:void(0)' }}">
                                    {{ $link_index['name'] }}
                                </a>
                            </li>
                            <li>
                                <i class="fa-solid fa-chevron-right text-xs mx-1"></i>
                            </li>
                            @if (!empty($detail['category'][0]))
                                @foreach ($detail['category'] as $item)
                                    <li>
                                        <a class="hover:text-med-primary transition" href="{{ !empty($link_products['url']) ? $link_products['url'] . '?q=' . $item['uid'] : 'javascript:void(0)' }}">
                                            {{ $item['name'] ?? '' }}
                                        </a>
                                    </li>
                                    <li>
                                        <i class="fa-solid fa-chevron-right text-xs mx-1"></i>
                                    </li>
                                @endforeach
                            @endif
                            <li aria-current="page">
                                <span class="text-med-primary font-medium">{{ $detail['name'] ?? '' }}</span>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
            <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">
                <div class="bg-med-white rounded-xl shadow-sm p-6 lg:p-8 mb-8">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
                        <div class="relative">
                            @if (!empty($detail['gallery'][0]))
                                @php
                                    $badge = empty($detail['tag'])
                                        ? null
                                        : [
                                            'label' => implode(', ', array_column($detail['tag'], 'name')),
                                            'class' => in_array(1, array_column($detail['tag'], 'id')) ? 'bg-gray-500' : 'bg-red-500',
                                        ];
                                @endphp
                                @if (!empty($badge))
                                    <div class="absolute top-4 left-0 z-20 {{ $badge['class'] ?? '' }} text-white text-sm font-bold px-3 py-1 rounded-r shadow-md">
                                        {{ $badge['label'] ?? '' }}
                                    </div>
                                @endif
                                <div class="swiper productMainSwiper rounded-lg border border-gray-100" style="--swiper-navigation-color: #5C795E; --swiper-pagination-color: #5C795E">
                                    <div class="swiper-wrapper">
                                        @foreach ($detail['gallery'] as $key => $item)
                                            <div class="swiper-slide group">
                                                <img class="w-full h-full object-cover cursor-zoom-in" src="{{ asset($item['image'] ?? '') }}" alt="{{ $item['name'] ?? '' }}" onclick="openLightbox({{ $key }})">
                                                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-5 transition-all pointer-events-none"></div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                                <div class="swiper productThumbsSwiper bg-transparent" thumbsSlider="">
                                    <div class="swiper-wrapper">
                                        @foreach ($detail['gallery'] as $key => $item)
                                            <div class="swiper-slide">
                                                <img class="w-full h-full object-cover" src="{{ asset($item['image'] ?? '') }}" alt="{{ $item['name'] ?? '' }}" />
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="flex flex-col justify-start space-y-5">
                            <div>
                                <div class="flex items-center gap-2 mb-2">
                                    <span class="bg-green-100 text-med-primary text-xs font-semibold px-2.5 py-0.5 rounded">{{ __('frontend::lang.label.remaining') }}: {{ $detail['stock'] ?? 0 }}</span>
                                    <span class="text-gray-400 text-xs">SKU: {{ $detail['sku'] ?? '' }}</span>
                                </div>
                                <h1 class="text-3xl font-bold text-med-dark mb-1">{{ $detail['name'] ?? '' }}</h1>
                                <div class="flex items-center gap-1 text-xs text-gray-500 mb-1">
                                    <span class="font-semibold text-med-dark">{{ __('frontend::lang.label.categories') }}:</span>
                                    @foreach ($detail['category'] as $item)
                                        <a class="hover:text-med-primary transition" href="{{ !empty($link_products['url']) ? $link_products['url'] . '?q=' . $item['uid'] : 'javascript:void(0)' }}">{{ $item['name'] ?? '' }}</a>
                                        @if (!$loop->last)
                                            <i class="fa-solid fa-chevron-right text-[9px]"></i>
                                        @endif
                                    @endforeach
                                </div>
                                <p class="text-med-secondary text-sm font-medium">{{ __('frontend::lang.label.manufacturer') }}: <span class="text-med-dark">{{ $detail['manufacturer'] ?? '' }}</span></p>
                            </div>
                            <div class="text-gray-600 leading-relaxed border-t border-b border-gray-100 py-4">
                                <p>{{ $detail['desc'] ?? '' }}</p>
                                <div class="grid grid-cols-2 gap-4 mt-4">
                                    @if (!empty($detail['size']))
                                        <div>
                                            <span class="text-gray-400 block text-xs">{{ __('frontend::lang.label.pack_size') }}</span>
                                            <div class="prose prose-slate">
                                                {!! $detail['size'] ?? '' !!}
                                            </div>
                                        </div>
                                    @endif
                                    @if (!empty($detail['unit']))
                                        <div>
                                            <span class="text-gray-400 block text-xs">{{ __('frontend::lang.label.unit_type') }}</span>
                                            <div class="prose prose-slate">
                                                {!! $detail['unit'] ?? '' !!}
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="space-y-4">
                                <div class="flex items-end gap-3">
                                    @php
                                        $price = $detail['price']['price'] ?? '0.00';
                                        $priceDiscount = $detail['price']['price_discount'] ?? '0.00';
                                        $hasDiscount = $priceDiscount != '0.00';
                                        $displayPrice = $hasDiscount ? $priceDiscount : $price;
                                        $save = $hasDiscount ? $price - $priceDiscount : 0;
                                    @endphp
                                    <span class="text-3xl font-bold text-med-primary">{{ $displayPrice ?? '0.00' }}</span>
                                    @if ($hasDiscount)
                                        <span class="text-lg text-gray-400 line-through mb-1">{{ $price ?? '0.00' }}</span>
                                        <span class="text-xs text-red-500 mb-2 font-medium">({{ __('frontend::lang.label.save') }}: {{ $save ?? '0.00' }} {{ __('frontend::lang.label.baht') }})</span>
                                    @endif
                                </div>
                                @if (auth()->guard('member')->check() && $detail['stock'] > 0)
                                    <livewire:frontend::section.product :product_id="$detail['id']" :stock="$detail['stock']" />
                                @else
                                    <div>
                                        <button class="w-full bg-white text-med-primary border border-med-primary text-sm py-2.5 sm:py-3 rounded-lg transition shadow-sm hover:bg-med-primary hover:text-white flex items-center justify-center gap-2 mt-auto" type="button" onclick="openContactModal()">
                                            <i class="fa-brands fa-line"></i>
                                            {{ __('frontend::lang.label.pre_order') }}
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @php
                    $chk_tabs = [];
                    foreach (['information', 'component', 'indication', 'take', 'storage'] as $item) {
                        if (!empty($detail[$item])) {
                            $chk_tabs[] = $item;
                        }
                    }
                @endphp
                @if (!empty($chk_tabs[0]))
                    <div class="bg-med-white rounded-xl shadow-sm p-6 mb-8">
                        <div class="border-b border-gray-200 overflow-x-auto">
                            <div class="flex space-x-8 min-w-max">
                                @foreach ($chk_tabs as $key => $item)
                                    <button class="{{ $key == 0 ? 'active' : 'text-gray-500 hover:text-med-dark' }} tab-btn pb-4 px-1 text-sm font-medium transition-colors" id="tab-{{ $item }}" onclick="switchTab('{{ $item }}')">
                                        {{ __("frontend::lang.label.{$item}") }}
                                    </button>
                                @endforeach
                            </div>
                        </div>
                        <div class="prose prose-slate mt-6 text-sm text-gray-700 leading-7">
                            @foreach ($chk_tabs as $key => $item)
                                <div class="tab-content {{ $key == 0 ? 'active' : '' }}" id="content-{{ $item }}">
                                    {!! $detail[$item] ?? '' !!}
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
                @if (!empty($detail['related'][0]))
                    <div class="mb-8">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-2xl font-bold text-med-dark">
                                {{ __('frontend::lang.label.related_products') }}
                            </h2>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                            @foreach ($detail['related'] as $product)
                                <x-frontend::product-card :product="$product" />
                            @endforeach
                        </div>
                    </div>
                @endif
            </main>
            <div class="lightbox" id="lightbox" onclick="closeLightbox(event)">
                <span class="lightbox-close" onclick="closeLightbox(event)">&times;</span>
                <button class="lightbox-nav prev" onclick="changeLightboxSlide(-1, event)">&#10094;</button>
                <button class="lightbox-nav next" onclick="changeLightboxSlide(1, event)">&#10095;</button>
                <img class="lightbox-content" id="lightbox-img" src="">
            </div>
        </div>
    </div>
    <x-frontend::modalline :line="$page_init['contact']['social']['line']['url'] ?? ''" />
@endsection

@push('scripts')
    <script src="{{ asset('modules/frontend/plugins/product-script/product-script.js') }}"></script>
    <script>
        document.addEventListener('livewire:init', () => {
            Livewire.on('toastMessageSuccess', (e) => {
                toastr.success(e[0] ?? '');
            });
            Livewire.on('toastMessageError', (e) => {
                toastr.error(e[0] ?? '');
            });
        });

        let lightboxImages = [];
        let currentLightboxIndex = 0;

        document.addEventListener("DOMContentLoaded", () => {
            const slideImages = document.querySelectorAll(".productMainSwiper .swiper-slide img");
            if (slideImages.length > 0) {
                lightboxImages = [...slideImages].map((img) => img.src);
            }

            const productThumbsSwiper = new Swiper(".productThumbsSwiper", {
                spaceBetween: 10,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesProgress: true,
                breakpoints: {
                    640: {
                        slidesPerView: 5
                    },
                    1024: {
                        slidesPerView: 4
                    },
                },
            });

            new Swiper(".productMainSwiper", {
                spaceBetween: 10,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                thumbs: {
                    swiper: productThumbsSwiper
                },
            });
        });

        window.switchTab = (tabId) => {
            document.querySelectorAll(".tab-btn").forEach((btn) => {
                btn.classList.remove("active", "text-med-primary");
                btn.classList.add("text-gray-500");
            });

            const clickedBtn = document.getElementById(`tab-${tabId}`);
            if (clickedBtn) {
                clickedBtn.classList.add("active");
                clickedBtn.classList.remove("text-gray-500");
            }

            document.querySelectorAll(".tab-content").forEach((content) => content.classList.remove("active"));

            const contentEl = document.getElementById(`content-${tabId}`);
            if (contentEl) contentEl.classList.add("active");
        };

        const updateLightboxImage = () => {
            const lightboxImg = document.getElementById("lightbox-img");
            if (!lightboxImg) return;
            lightboxImg.style.opacity = "0.5";
            lightboxImg.src = lightboxImages[currentLightboxIndex];
            setTimeout(() => {
                lightboxImg.style.opacity = "1";
                lightboxImg.style.transition = "opacity 0.2s";
            }, 50);
        };

        window.openLightbox = (index) => {
            if (lightboxImages.length === 0) {
                const slideImages = document.querySelectorAll(".productMainSwiper .swiper-slide img");
                lightboxImages = [...slideImages].map((img) => img.src);
            }
            currentLightboxIndex = index;
            updateLightboxImage();
            const lightbox = document.getElementById("lightbox");
            if (lightbox) {
                lightbox.classList.add("active");
                document.body.style.overflow = "hidden";
            }
        };

        window.closeLightbox = (event) => {
            if (event.target.id !== "lightbox" && !event.target.classList.contains("lightbox-close")) return;
            const lb = document.getElementById("lightbox");
            if (lb) lb.classList.remove("active");
            document.body.style.overflow = "auto";
        };

        window.changeLightboxSlide = (n, event) => {
            if (event) event.stopPropagation();
            currentLightboxIndex += n;
            const len = lightboxImages.length;
            currentLightboxIndex = currentLightboxIndex >= len ? 0 : currentLightboxIndex < 0 ? len - 1 : currentLightboxIndex;
            updateLightboxImage();
        };
    </script>
@endpush