@extends('layouts.modern')

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

@section('content')
<div class="bg-slate-950 min-h-screen text-white pt-40 pb-20" 
     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-6">
        <div class="flex flex-col lg:flex-row gap-20 xl:gap-32">
            
            <!-- Gallery -->
            <div class="lg:w-3/5 space-y-8 animate-reveal">
                <div class="relative aspect-square rounded-[4rem] overflow-hidden bg-white/5 border border-white/5 shadow-2xl 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-[2s]">
                    </template>
                    @if($product->images->isEmpty())
                        <img src="https://placehold.co/1200x1200?text=Premium+Product" class="w-full h-full object-cover opacity-20">
                    @endif
                    
                    <div class="absolute top-10 left-10 flex gap-3">
                        @if($product->price_was)
                            <span class="px-5 py-2 bg-red-600 text-white text-[9px] font-black uppercase tracking-widest rounded-xl shadow-2xl">Sale</span>
                        @endif
                        @if($product->is_featured)
                            <span class="px-5 py-2 bg-primary text-white text-[9px] font-black uppercase tracking-widest rounded-xl shadow-2xl">Featured</span>
                        @endif
                    </div>
                </div>
                
                @if($product->images->count() > 1)
                    <div class="grid grid-cols-5 gap-6">
                        @foreach($product->images as $img)
                            <button @click="activeImage = '{{ asset('storage/' . $img->image_path) }}'" 
                                    class="aspect-square rounded-[1.5rem] overflow-hidden border-2 transition-all p-1"
                                    :class="activeImage == '{{ asset('storage/' . $img->image_path) }}' ? 'border-primary' : 'border-white/5 opacity-40 hover:opacity-100'">
                                <img src="{{ asset('storage/' . $img->image_path) }}" class="w-full h-full object-cover rounded-2xl">
                            </button>
                        @endforeach
                    </div>
                @endif
            </div>

            <!-- Info -->
            <div class="lg:w-2/5 animate-reveal" style="animation-delay: 0.2s">
                <div class="lg:sticky lg:top-40 space-y-12">
                    <div>
                        <p class="text-[10px] font-black uppercase tracking-[0.4em] text-primary mb-6">{{ $product->category->name ?? 'Collection' }}</p>
                        <h1 class="font-modern text-4xl sm:text-6xl font-black leading-none mb-8 tracking-tighter">{{ $product->name }}</h1>
                        
                        <div class="flex items-center gap-6">
                            <p class="text-5xl font-black" x-text="formatCurrency(currentPrice)"></p>
                            @if($product->price_was)
                                <span class="text-xl text-white/20 line-through">Rp {{ number_format($product->price_was, 0, ',', '.') }}</span>
                            @endif
                        </div>
                    </div>

                    <!-- Variants -->
                    @if($product->variants->isNotEmpty())
                        <div class="space-y-6">
                            <h3 class="text-[9px] font-black uppercase tracking-[0.3em] text-white/30">Select Variant</h3>
                            <div class="flex flex-wrap gap-4">
                                @foreach($product->variants as $variant)
                                    <button @click="selectVariant({{ $variant->id }})" 
                                            class="px-8 py-5 rounded-3xl border-2 text-sm font-bold transition-all text-left group"
                                            :class="selectedVariantId == {{ $variant->id }} ? 'border-primary bg-primary/10 text-white' : 'border-white/5 text-slate-500 hover:border-white/20 hover:text-white'">
                                        <div class="flex flex-col">
                                            <span class="block">{{ $variant->name }}</span>
                                            @if($variant->price_adjustment != 0)
                                                <span class="text-[9px] opacity-40 mt-1">{{ $variant->price_adjustment > 0 ? '+' : '' }} Rp {{ number_format($variant->price_adjustment, 0, ',', '.') }}</span>
                                            @endif
                                        </div>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Quantity -->
                    <div class="space-y-6">
                        <h3 class="text-[9px] font-black uppercase tracking-[0.3em] text-white/30">Quantity</h3>
                        <div class="flex items-center gap-8">
                            <div class="flex items-center bg-white/5 border border-white/10 rounded-[2rem] p-2">
                                <button @click="qty > 1 ? qty-- : null" class="w-12 h-12 flex items-center justify-center text-slate-500 hover:text-white transition-all">
                                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="3" 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-2xl" readonly>
                                <button @click="qty < maxQty ? qty++ : null" class="w-12 h-12 flex items-center justify-center text-slate-500 hover:text-white transition-all">
                                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="M12 4v16m8-8H4"/></svg>
                                </button>
                            </div>
                            <p class="text-[10px] font-bold text-white/30" x-show="!isUnlimited"><span x-text="maxQty" class="text-white font-black"></span> units available</p>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex flex-col gap-5 pt-8">
                        <button @click="buyNow" 
                                :disabled="loading || (maxQty <= 0 && !isUnlimited)"
                                class="w-full py-7 bg-white text-slate-950 font-black rounded-[2.5rem] shadow-[0_20px_40px_rgba(255,255,255,0.1)] hover:scale-[1.02] active:scale-95 transition-all disabled:opacity-20">
                            Checkout Now
                        </button>
                        <button @click="addToCart" 
                                :disabled="loading || (maxQty <= 0 && !isUnlimited)"
                                class="w-full py-7 bg-transparent text-white font-black rounded-[2.5rem] border-2 border-white/10 hover:bg-white/5 transition-all flex items-center justify-center gap-3">
                            <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>
                            Add to Cart
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Description -->
        <div class="mt-40 border-t border-white/5 pt-32 animate-reveal">
            <h2 class="font-modern text-4xl font-black mb-16 tracking-tighter">Information.</h2>
            <div class="prose prose-invert prose-xl max-w-4xl text-slate-400 font-medium leading-relaxed">
                {!! $product->description !!}
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('productHandler', (config) => ({
            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 produk 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
                    }, {
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    });
                    
                    if (response.data.success) {
                        alert('Berhasil ditambahkan ke keranjang!');
                        window.location.reload();
                    }
                } catch (e) {
                    console.error(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 produk 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
                    }, {
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    });
                    
                    if (response.data.success) {
                        window.location.href = '{{ url('/checkout') }}';
                    }
                } catch (e) {
                    console.error(e);
                    alert(e.response?.data?.message || 'Gagal memproses pesanan.');
                    this.loading = false;
                }
            }
        }));
    });
</script>
@endpush
@endsection