@extends('layouts.app')

@section('title', $product->meta_title ?? $product->name . ' - ' . setting('store_name'))
@section('meta_description', $product->meta_description)

@push('head')
<script type="application/ld+json">
{
  "@@context": "https://schema.org/",
  "@@type": "Product",
  "name": "{{ $product->name }}",
  "image": [
    @foreach($product->images as $image)
      "{{ asset('storage/' . $image->image_path) }}"{{ !$loop->last ? ',' : '' }}
    @endforeach
    @if($product->images->isEmpty())
      "https://placehold.co/800x800?text={{ urlencode($product->name) }}"
    @endif
  ],
  "description": "{{ strip_tags($product->description) }}",
  "sku": "SKU-{{ $product->id }}",
  "brand": {
    "@@type": "Brand",
    "name": "{{ setting('store_name') }}"
  },
  "offers": {
    "@@type": "Offer",
    "url": "{{ url()->current() }}",
    "priceCurrency": "IDR",
    "price": "{{ $product->price }}",
    "availability": "https://schema.org/{{ $product->stock > 0 || $product->is_unlimited_stock ? 'InStock' : 'OutOfStock' }}",
    "seller": {
      "@@type": "Organization",
      "name": "{{ setting('store_name') }}"
    }
  }
}
</script>
@endpush

@section('content')
<div class="bg-white min-h-screen" 
     x-data="productHandler({
        id: {{ $product->id }},
        basePrice: {{ $product->price }},
        variants: {{ $product->variants->toJson() }},
        isUnlimited: {{ $product->is_unlimited_stock ? 'true' : 'false' }},
        stock: {{ $product->stock }}
     })">
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 sm:pt-40">
        <div class="flex flex-col lg:flex-row gap-16 xl:gap-24">
            
            <!-- Gallery (Left Column) -->
            <div class="lg:w-3/5 space-y-6 animate-reveal">
                <!-- Main Image -->
                <div class="relative aspect-square rounded-[3rem] overflow-hidden bg-slate-50 premium-shadow group">
                    <template x-if="activeImage">
                        <img :src="activeImage" alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
                    </template>
                    @if($product->images->isEmpty())
                        <img src="https://placehold.co/1200x1200?text=Premium+Product" alt="Placeholder" class="w-full h-full object-cover">
                    @endif
                    
                    <div class="absolute bottom-10 left-10 flex gap-3">
                        @if($product->price_was)
                            <span class="px-5 py-2 bg-red-500 text-white text-[10px] font-black uppercase tracking-widest rounded-2xl shadow-xl shadow-red-500/20">Sale</span>
                        @endif
                        @if($product->is_featured)
                            <span class="px-5 py-2 bg-primary text-white text-[10px] font-black uppercase tracking-widest rounded-2xl shadow-xl shadow-primary/20">Featured</span>
                        @endif
                    </div>
                </div>
                
                <!-- Thumbnails Grid -->
                @if($product->images->count() > 1)
                    <div class="grid grid-cols-5 gap-4">
                        @foreach($product->images as $img)
                            <button @click="activeImage = '{{ asset('storage/' . $img->image_path) }}'" 
                                    class="aspect-square rounded-2xl overflow-hidden border-2 transition-all p-1"
                                    :class="activeImage == '{{ asset('storage/' . $img->image_path) }}' ? 'border-primary' : 'border-slate-50 opacity-40 hover:opacity-100'">
                                <img src="{{ asset('storage/' . $img->image_path) }}" class="w-full h-full object-cover rounded-xl">
                            </button>
                        @endforeach
                    </div>
                @endif

                <!-- Desktop Description -->
                <div class="hidden lg:block pt-20">
                    <h2 class="text-2xl font-black text-slate-900 mb-8">Informasi Produk</h2>
                    <div class="prose prose-slate prose-lg max-w-none text-slate-600 leading-relaxed text-balance">
                        {!! $product->description !!}
                    </div>
                </div>
            </div>

            <!-- Sticky Info (Right Column) -->
            <div class="lg:w-2/5 animate-reveal" style="animation-delay: 0.1s">
                <div class="lg:sticky lg:top-32 space-y-12">
                    <div>
                        <nav class="flex mb-6 text-[10px] font-black uppercase tracking-[0.3em] text-slate-400" aria-label="Breadcrumb">
                            <a href="{{ url('/shop?category=' . $product->category?->slug) }}" class="text-primary hover:underline underline-offset-4 transition-all">
                                {{ $product->category->name ?? 'Uncategorized' }}
                            </a>
                        </nav>
                        <h1 class="text-4xl sm:text-5xl font-black text-slate-900 leading-[1.1] mb-6 text-balance">{{ $product->name }}</h1>
                        <div class="flex items-center gap-6">
                            <p class="text-4xl font-black text-primary" x-text="formatCurrency(currentPrice)"></p>
                            @if($product->price_was)
                                <span class="text-lg text-slate-300 line-through">Rp {{ number_format($product->price_was, 0, ',', '.') }}</span>
                            @endif
                        </div>
                    </div>

                    <!-- Variants Selection -->
                    @if($product->variants->isNotEmpty())
                        <div class="space-y-6">
                            <h3 class="text-xs font-black uppercase tracking-[0.2em] text-slate-900">Pilih Varian</h3>
                            <div class="flex flex-wrap gap-3">
                                @foreach($product->variants as $variant)
                                    <button @click="selectVariant({{ $variant->id }})" 
                                            class="px-6 py-4 rounded-2xl border-2 text-sm font-bold transition-all flex flex-col items-start gap-1 min-w-[120px]"
                                            :class="selectedVariantId == {{ $variant->id }} ? 'border-primary bg-primary/5 text-primary' : 'border-slate-50 text-slate-600 hover:border-slate-100 hover:bg-slate-50/50'">
                                        <span class="text-sm">{{ $variant->name }}</span>
                                        @if($variant->price_adjustment != 0)
                                            <span class="text-[10px] opacity-60">({{ $variant->price_adjustment > 0 ? '+' : '' }} Rp {{ number_format($variant->price_adjustment, 0, ',', '.') }})</span>
                                        @endif
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Quantity -->
                    <div class="space-y-6">
                        <h3 class="text-xs font-black uppercase tracking-[0.2em] text-slate-900">Jumlah Pesanan</h3>
                        <div class="flex items-center gap-6">
                            <div class="flex items-center border-2 border-slate-50 rounded-[1.5rem] p-1.5 bg-slate-50/30">
                                <button @click="qty > 1 ? qty-- : null" class="w-12 h-12 flex items-center justify-center text-slate-400 hover:text-primary transition-all disabled:opacity-20" :disabled="qty <= 1">
                                    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M20 12H4"/></svg>
                                </button>
                                <input type="number" x-model.number="qty" class="w-16 text-center bg-transparent border-none focus:ring-0 font-black text-xl text-slate-900" readonly>
                                <button @click="qty < maxQty ? qty++ : null" class="w-12 h-12 flex items-center justify-center text-slate-400 hover:text-primary transition-all disabled:opacity-20" :disabled="qty >= maxQty">
                                    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M12 4v16m8-8H4"/></svg>
                                </button>
                            </div>
                            <p class="text-xs font-bold text-slate-400" x-show="!isUnlimited">Tersedia <span x-text="maxQty" class="text-slate-900 font-black"></span> unit</p>
                        </div>
                    </div>

                    <!-- CTA Actions -->
                    <div class="flex flex-col gap-4">
                        <button @click="buyNow" 
                                :disabled="loading || (maxQty <= 0 && !isUnlimited)"
                                class="w-full flex justify-center items-center py-6 bg-primary text-white font-black rounded-[2rem] shadow-2xl shadow-primary/30 hover:scale-[1.02] active:scale-95 transition-all disabled:opacity-50 disabled:grayscale">
                            Beli Sekarang
                        </button>
                        <button @click="addToCart" 
                                :disabled="loading || (maxQty <= 0 && !isUnlimited)"
                                class="w-full flex justify-center items-center gap-3 py-6 bg-white text-slate-900 font-black rounded-[2rem] border-2 border-slate-100 hover:bg-slate-50 transition-all disabled:opacity-50">
                            <template x-if="!loading">
                                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M16 11V7a4 4 0 00-8 0v4M5 11h14l1 12H4L5 11z"/></svg>
                            </template>
                            <template x-if="loading">
                                <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                            </template>
                            Tambah ke Keranjang
                        </button>
                    </div>

                    <!-- Secondary Info -->
                    <div class="grid grid-cols-2 gap-6 pt-12 border-t border-slate-100">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center text-primary flex-shrink-0">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0a2 2 0 01-2 2H6a2 2 0 01-2-2m16 0l-8 4-8-4"/></svg>
                            </div>
                            <div>
                                <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1">Berat</p>
                                <p class="text-sm font-bold text-slate-900">{{ $product->weight }} gram</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center text-primary flex-shrink-0">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                            </div>
                            <div>
                                <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1">Garansi</p>
                                <p class="text-sm font-bold text-slate-900">Original</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mobile Description -->
        <div class="lg:hidden pt-20 animate-reveal">
            <h2 class="text-2xl font-black text-slate-900 mb-8">Informasi Produk</h2>
            <div class="prose prose-slate prose-lg max-w-none text-slate-600 leading-relaxed text-balance">
                {!! $product->description !!}
            </div>
        </div>

        <!-- Related Products Premium -->
        @if($relatedProducts->isNotEmpty())
            <div class="mt-40 mb-32">
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
                    <div>
                        <p class="text-[10px] font-black uppercase tracking-[0.3em] text-primary mb-4">Recommendations</p>
                        <h2 class="text-4xl font-black text-slate-900">Produk Terkait</h2>
                    </div>
                    <a href="{{ url('/shop?category=' . $product->category?->slug) }}" class="text-sm font-bold text-slate-400 hover:text-primary transition-all flex items-center gap-2 group">
                        Lihat Lainnya
                        <svg class="h-4 w-4 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-16">
                    @foreach($relatedProducts as $related)
                        <div class="group flex flex-col">
                            <a href="{{ url('/shop/' . $related->slug) }}" class="relative aspect-[3/4] rounded-[2.5rem] overflow-hidden bg-slate-50 mb-6 premium-shadow">
                                <img src="{{ $related->primaryImage?->image_path ? asset('storage/' . $related->primaryImage->image_path) : 'https://placehold.co/600x800?text=' . $related->name }}" 
                                     alt="{{ $related->name }}" 
                                     class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                            </a>
                            <div class="px-1">
                                <h3 class="text-base font-black text-slate-900 group-hover:text-primary transition-all">
                                    <a href="{{ url('/shop/' . $related->slug) }}">{{ $related->name }}</a>
                                </h3>
                                <p class="text-lg font-black text-primary mt-1">Rp {{ number_format($related->price, 0, ',', '.') }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    function productHandler(config) {
        return {
            id: config.id,
            basePrice: config.basePrice,
            variants: config.variants,
            isUnlimited: config.isUnlimited,
            stock: config.stock,
            
            selectedVariantId: null,
            qty: 1,
            activeImage: '{{ $product->primaryImage?->image_path ? asset('storage/' . $product->primaryImage->image_path) : 'https://placehold.co/1200x1200?text=Premium+Product' }}',
            loading: false,

            get currentPrice() {
                if (!this.selectedVariantId) return this.basePrice;
                const v = this.variants.find(v => v.id === this.selectedVariantId);
                return this.basePrice + (v ? parseFloat(v.price_adjustment) : 0);
            },

            get maxQty() {
                if (this.isUnlimited) return 999;
                if (!this.selectedVariantId) return this.stock;
                const v = this.variants.find(v => v.id === this.selectedVariantId);
                return v ? v.stock : 0;
            },

            selectVariant(id) {
                this.selectedVariantId = id;
                if (this.qty > this.maxQty) this.qty = this.maxQty || 1;
            },

            formatCurrency(val) {
                return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(val);
            },

            async addToCart() {
                if (this.variants.length > 0 && !this.selectedVariantId) {
                    alert('Silakan pilih varian terlebih dahulu.');
                    return;
                }

                this.loading = true;
                try {
                    const response = await axios.post('{{ url('/cart/add') }}', {
                        product_id: this.id,
                        variant_id: this.selectedVariantId,
                        quantity: this.qty
                    });
                    
                    if (response.data.success) {
                        alert('Berhasil ditambahkan ke keranjang!');
                        window.location.reload();
                    }
                } catch (e) {
                    alert(e.response?.data?.message || 'Gagal menambahkan ke keranjang.');
                } finally {
                    this.loading = false;
                }
            },

            async buyNow() {
                if (this.variants.length > 0 && !this.selectedVariantId) {
                    alert('Silakan pilih varian terlebih dahulu.');
                    return;
                }

                this.loading = true;
                try {
                    const response = await axios.post('{{ url('/cart/add') }}', {
                        product_id: this.id,
                        variant_id: this.selectedVariantId,
                        quantity: this.qty
                    });
                    
                    if (response.data.success) {
                        window.location.href = '{{ url('/checkout') }}';
                    }
                } catch (e) {
                    alert(e.response?.data?.message || 'Gagal memproses pesanan.');
                    this.loading = false;
                }
            }
        }
    }
</script>
@endpush