@extends('layouts.app', ['title' => $product->name])

@section('content')
<div class="space-y-16 max-w-6xl mx-auto">

    <!-- Breadcrumb Navigation -->
    <nav aria-label="Breadcrumb" class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[#75786f]">
        <a href="{{ route('home') }}" class="hover:text-[#526048] transition-colors">Home</a>
        <span>/</span>
        <a href="{{ route('products.index') }}" class="hover:text-[#526048] transition-colors">Shop</a>
        <span>/</span>
        @if ($product->category)
            <a href="{{ route('products.index', ['category' => $product->category]) }}" class="hover:text-[#526048] transition-colors">
                {{ $product->category }}
            </a>
            <span>/</span>
        @endif
        <span class="text-[#526048] truncate max-w-xs">{{ $product->name }}</span>
    </nav>

    <!-- Product Hero Section (Bento Gallery + Product Info) -->
    @php
        $heroImg = $product->image_path ? asset('storage/' . $product->image_path) : 'https://lh3.googleusercontent.com/aida-public/AB6AXuBibuhHxUJLdf_pQVBJ8O3mkbFjY9SdZekA22sUQaSOE7tHITOjB60vCaAvasUauX5gxLObxevOBIrJgQOwiUsmwkBpnyZrLYvcA5g7K6JGR7UTTE0fSyVwpJoWv2XybAkRDvyaT9qWW7Uz8mTU-Mnydeqe7IQulo5O6DGnVSTa0d86DWkM1Rv6Q5yZ6mBiq1SNSeybpehPxwJcEg5veFMVjslRcXU_Kj2_FMbhUVVJoTp1EV_Rshn1_A';
        $detailImg1 = $product->image_2_path ? asset('storage/' . $product->image_2_path) : 'https://lh3.googleusercontent.com/aida-public/AB6AXuBkl5f2G9J_lYWCLza5Hb-p4-NryJt4u_79tyJgapiHXAdPM2-OsHFiPQvWgPX8EElZZ4ICMzalffinPIf_FA6Yb1OG_f2Oqasskn31-QGmi15zXADKkNpNs0iuCrR-8M0JuGidBg7u9cLphBxDPcTe0TAJs6sNuK0nlZxLojuP1foOip-HsZ15k5C3ySAZ9vYyYot0Og2w0Mxw27W7gTD6V7sf-DFxwQitxEo-DUpNylswm9uHXyblvg';
        $detailImg2 = $product->image_3_path ? asset('storage/' . $product->image_3_path) : 'https://lh3.googleusercontent.com/aida-public/AB6AXuD54l7JfVOuOAaZCo70YsozbNzGnW5eh1xrGd6VlWgdz47fC0Nn3vSHO35tRIVGOx715ZN7GpqCqIzWzWYUBO4R81GtVhTPDIwXIf7GP0RR861NWpdO0T_TtzQHz_go5xpgQYylJJ1tcFZBB7VY8jgj_GAni4SspB4a19hRI5yoOkKiTiyrODHnMNdaxG1Coaq8S2nZLMH7lhGFRWUdelE3PUjh6HFzs_SPPy9Ue1rQyFwpTyNTxONu1A';
    @endphp

    <div x-data="{ lightboxOpen: false, activeImage: '', activeTitle: '' }" @keydown.escape.window="lightboxOpen = false" class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">

        <!-- Left: Image Gallery -->
        <div class="lg:col-span-7 grid grid-cols-2 gap-4">
            <!-- Main Hero Image -->
            <div @click="activeImage = '{{ $heroImg }}'; activeTitle = '{{ addslashes($product->name) }} - Main Cover'; lightboxOpen = true"
                 class="col-span-2 aspect-4/5 sm:h-[520px] rounded-3xl overflow-hidden bg-[#f5f3ee] border border-[#e4e2dd] shadow-xs relative group cursor-zoom-in">
                <img src="{{ $heroImg }}"
                     alt="{{ $product->name }}"
                     class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">

                <!-- Zoom Hover Button Overlay -->
                <div class="absolute inset-0 bg-black/15 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center pointer-events-none">
                    <span class="px-4 py-2 rounded-full bg-white/90 backdrop-blur-xs text-[#1b1c19] text-xs font-semibold shadow-lg flex items-center gap-1.5 transform scale-95 group-hover:scale-100 transition-transform">
                        <span class="material-symbols-outlined text-sm">zoom_in</span> Click to Zoom
                    </span>
                </div>

                <div class="absolute top-4 left-4 flex flex-col gap-1.5">
                    @if ($product->is_featured)
                        <span class="px-3 py-1 rounded-full bg-[#526048] text-white text-[10px] font-bold uppercase tracking-wider shadow-xs flex items-center gap-1">
                            <span class="material-symbols-outlined text-[12px]">star</span>
                            <span>Signature</span>
                        </span>
                    @endif
                    <span class="px-3.5 py-1 rounded-full bg-[#fbf9f4]/90 backdrop-blur-xs text-[#526048] text-xs font-bold uppercase tracking-wider">
                        {{ $product->category ?? 'Beauty Supplies' }}
                    </span>
                </div>
            </div>

            <!-- Detail Shot 1 (Image 2) -->
            <div @click="activeImage = '{{ $detailImg1 }}'; activeTitle = '{{ addslashes($product->name) }} - Detail View'; lightboxOpen = true"
                 class="h-44 sm:h-52 rounded-2xl overflow-hidden bg-[#f5f3ee] border border-[#e4e2dd] relative group cursor-zoom-in">
                <img src="{{ $detailImg1 }}"
                     alt="{{ $product->name }} Detail Shot"
                     class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">

                <div class="absolute inset-0 bg-black/15 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center pointer-events-none">
                    <span class="p-2 rounded-full bg-white/90 text-[#1b1c19] shadow-md flex items-center justify-center">
                        <span class="material-symbols-outlined text-sm">zoom_in</span>
                    </span>
                </div>

                <div class="absolute bottom-2 left-3 text-[10px] font-bold text-white uppercase tracking-wider bg-black/40 px-2 py-0.5 rounded backdrop-blur-xs">
                    Detail View
                </div>
            </div>

            <!-- Detail Shot 2 (Image 3) -->
            <div @click="activeImage = '{{ $detailImg2 }}'; activeTitle = '{{ addslashes($product->name) }} - Showcase'; lightboxOpen = true"
                 class="h-44 sm:h-52 rounded-2xl overflow-hidden bg-[#f5f3ee] border border-[#e4e2dd] relative group cursor-zoom-in">
                <img src="{{ $detailImg2 }}"
                     alt="{{ $product->name }} In Use"
                     class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">

                <div class="absolute inset-0 bg-black/15 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center pointer-events-none">
                    <span class="p-2 rounded-full bg-white/90 text-[#1b1c19] shadow-md flex items-center justify-center">
                        <span class="material-symbols-outlined text-sm">zoom_in</span>
                    </span>
                </div>

                <div class="absolute bottom-2 left-3 text-[10px] font-bold text-white uppercase tracking-wider bg-black/40 px-2 py-0.5 rounded backdrop-blur-xs">
                    Showcase
                </div>
            </div>

            <!-- Lightbox Zoom Modal Popup -->
            <template x-teleport="body">
                <div x-show="lightboxOpen"
                     x-cloak
                     class="fixed inset-0 z-[99999] flex items-center justify-center p-4 sm:p-6"
                     role="dialog"
                     aria-modal="true">

                    <!-- Dark Blurred Backdrop -->
                    <div x-show="lightboxOpen"
                         x-transition:enter="ease-out duration-300"
                         x-transition:enter-start="opacity-0"
                         x-transition:enter-end="opacity-100"
                         x-transition:leave="ease-in duration-200"
                         x-transition:leave-start="opacity-100"
                         x-transition:leave-end="opacity-0"
                         @click="lightboxOpen = false"
                         class="fixed inset-0 bg-black/85 backdrop-blur-md transition-opacity"></div>

                    <!-- Modal Content -->
                    <div x-show="lightboxOpen"
                         x-transition:enter="ease-out duration-300"
                         x-transition:enter-start="opacity-0 scale-95"
                         x-transition:enter-end="opacity-100 scale-100"
                         x-transition:leave="ease-in duration-200"
                         x-transition:leave-start="opacity-100 scale-100"
                         x-transition:leave-end="opacity-0 scale-95"
                         class="relative max-w-4xl w-full max-h-[90vh] flex flex-col items-center justify-center z-10">

                        <!-- Close Button -->
                        <button type="button"
                                @click="lightboxOpen = false"
                                class="absolute -top-12 right-0 text-white/80 hover:text-white bg-white/10 hover:bg-white/20 p-2 rounded-full transition-colors flex items-center justify-center cursor-pointer">
                            <span class="material-symbols-outlined text-2xl">close</span>
                        </button>

                        <!-- High-Res Zoomed Image -->
                        <div class="relative bg-black/30 rounded-2xl overflow-hidden border border-white/10 shadow-2xl p-1 max-h-[82vh] flex items-center justify-center">
                            <img :src="activeImage"
                                 :alt="activeTitle"
                                 class="max-w-full max-h-[80vh] object-contain rounded-xl select-none">
                        </div>

                        <!-- Caption -->
                        <div class="mt-3 text-center text-xs text-white/80 font-serif tracking-wide">
                            <span x-text="activeTitle"></span>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- Right: Product Information & Purchase Form -->
        <div class="lg:col-span-5 space-y-6">

            <!-- Badges & Tags -->
            <div class="flex flex-wrap gap-2">
                <span class="bg-[#d8e8c8] text-[#131f0b] text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full">
                    Salon Grade
                </span>
                <span class="bg-[#f0eee9] text-[#1b1c19] text-xs font-semibold uppercase tracking-wider px-3 py-1 rounded-full">
                    Professional Quality
                </span>
                <span class="bg-[#ecdecb] text-[#6b6153] text-xs font-semibold uppercase tracking-wider px-3 py-1 rounded-full">
                    Authentic Guaranteed
                </span>
            </div>

            <!-- Title & Price -->
            <div class="space-y-2">
                <h1 class="font-serif text-3xl sm:text-4xl font-semibold text-[#1b1c19] leading-tight">
                    {{ $product->name }}
                </h1>
                <div class="flex items-baseline gap-3">
                    <span class="font-serif text-3xl font-bold text-[#526048]">
                        Rp {{ number_format($product->price, 0, ',', '.') }}
                    </span>
                    <span class="text-xs text-[#75786f] uppercase font-semibold">
                        • {{ $product->weight_grams }} grams
                    </span>
                </div>
            </div>

            <!-- Short Summary Tagline & Full Description -->
            @if ($product->short_description)
                <div class="p-3.5 rounded-2xl bg-[#fbf9f4] border border-[#e4e2dd] text-xs text-[#526048] font-semibold leading-relaxed">
                    {{ $product->short_description }}
                </div>
            @endif

            @if ($product->description)
                <p class="text-sm text-[#444840] leading-relaxed">
                    {{ $product->description }}
                </p>
            @endif

            <!-- Stock Availability Notice -->
            <div class="p-3.5 rounded-2xl bg-[#f5f3ee] border border-[#e4e2dd] text-xs flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <span class="w-2.5 h-2.5 rounded-full {{ $product->stock > 0 ? 'bg-emerald-500' : 'bg-rose-500' }}"></span>
                    <span class="font-medium text-[#1b1c19]">
                        {{ $product->stock > 0 ? "In Stock ({$product->stock} units available)" : 'Temporarily Out of Stock' }}
                    </span>
                </div>
                <span class="text-[11px] text-[#75786f]">Ready to Dispatch / In-Store Pickup</span>
            </div>

            <!-- Purchase Form -->
            @if ($product->stock > 0)
                <form method="POST" action="{{ route('cart.store') }}" class="space-y-4">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">

                    <div class="flex items-center gap-4">
                        <!-- Quantity Stepper -->
                        <div x-data="{ qty: 1, maxStock: {{ $product->stock }} }" class="flex items-center border border-[#c5c8bd] rounded-full bg-white overflow-hidden shadow-xs">
                            <button type="button" @click="if(qty > 1) qty--" class="px-3.5 py-3 text-stone-500 hover:text-stone-900 focus:outline-none">
                                <span class="material-symbols-outlined text-sm">remove</span>
                            </button>
                            <input type="number" name="quantity" x-model="qty" min="1" :max="maxStock" class="w-12 text-center text-xs font-bold border-0 focus:ring-0 p-0 text-[#1b1c19]">
                            <button type="button" @click="if(qty < maxStock) qty++" class="px-3.5 py-3 text-stone-500 hover:text-stone-900 focus:outline-none">
                                <span class="material-symbols-outlined text-sm">add</span>
                            </button>
                        </div>

                        <!-- Add To Basket Button -->
                        <button type="submit" class="flex-1 py-3.5 px-6 rounded-full bg-[#526048] hover:bg-[#6a795f] text-white text-xs font-bold uppercase tracking-wider transition-all duration-300 flex items-center justify-center gap-2 shadow-xs transform hover:scale-[1.01]">
                            <span class="material-symbols-outlined text-lg">shopping_bag</span>
                            <span>Add to Basket</span>
                        </button>
                    </div>
                </form>
            @endif

            <!-- In-Store Pickup Guarantee -->
            <div class="p-4 rounded-2xl bg-[#ecdecb]/30 border border-[#ecdecb] text-xs text-[#6b6153] flex items-start gap-3">
                <span class="material-symbols-outlined text-[#526048] text-xl shrink-0 mt-0.5">storefront</span>
                <div>
                    <strong class="text-[#1b1c19] block">Lombok Store Pick-up Available</strong>
                    <p class="mt-0.5">
                        Prefer collecting directly? Select <em>Store Pick-up</em> at checkout for zero shipping fees and pay directly at our Senggigi beauty counter.
                    </p>
                </div>
            </div>

            <!-- Features & Specifications if available -->
            @if ($product->features)
                <div class="p-3.5 rounded-2xl bg-[#f5f3ee] border border-[#e4e2dd] text-xs flex items-center gap-2">
                    <span class="material-symbols-outlined text-[#526048] text-base">verified</span>
                    <span class="text-[#444840]">Specifications / Features: <strong class="text-[#1b1c19]">{{ $product->features }}</strong></span>
                </div>
            @endif

            <!-- Accordion Details -->
            <div class="border-t border-[#e4e2dd] pt-4 space-y-3">
                <!-- 1. Key Ingredients / Specifications -->
                <details class="group bg-white rounded-2xl border border-[#e4e2dd] p-4 open:shadow-xs transition-all" open>
                    <summary class="flex justify-between items-center cursor-pointer list-none font-serif text-lg font-semibold text-[#1b1c19]">
                        <span>Ingredients & Specifications</span>
                        <span class="material-symbols-outlined transition-transform duration-300 group-open:rotate-180 text-sm">expand_more</span>
                    </summary>
                    <div class="text-xs text-[#444840] pt-3 space-y-2.5 leading-relaxed">
                        @if ($product->specifications)
                            <div class="p-3 rounded-xl bg-[#fbf9f4] border border-[#e4e2dd] font-medium text-[#1b1c19]">
                                {{ $product->specifications }}
                            </div>
                        @else
                            <p class="text-xs text-[#75786f]">Formulated with premium beauty grade materials for salon and personal care excellence.</p>
                        @endif
                        <div class="flex items-start gap-2.5">
                            <span class="material-symbols-outlined text-[#526048] text-base shrink-0 mt-0.5">check_circle</span>
                            <span><strong>Quality Assurance:</strong> Selected to meet quality standards and provide reliable performance for personal and professional use.</span>
                        </div>
                        <!-- <div class="flex items-start gap-2.5">
                            <span class="material-symbols-outlined text-[#526048] text-base shrink-0 mt-0.5">check_circle</span>
                            <span><strong>Salon Standard:</strong> Tested and trusted by professional beauty therapists, stylists, and estheticians.</span>
                        </div> -->
                    </div>
                </details>

                <!-- 2. Application & Usage -->
                <details class="group bg-white rounded-2xl border border-[#e4e2dd] p-4 open:shadow-xs transition-all">
                    <summary class="flex justify-between items-center cursor-pointer list-none font-serif text-lg font-semibold text-[#1b1c19]">
                        <span>How to Use & Professional Application</span>
                        <span class="material-symbols-outlined transition-transform duration-300 group-open:rotate-180 text-sm">expand_more</span>
                    </summary>
                    <div class="text-xs text-[#444840] pt-3 leading-relaxed">
Use or operate the product according to the instructions provided on the packaging or product documentation. For professional equipment, follow the recommended operating and safety procedures.                    </div>
                </details>
            </div>
        </div>
    </div>
</div>
@endsection