<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $product->name }} - Detail Produk | BERKAH.TRF</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .product-image-container {
            background-image: radial-gradient(circle, #f3f4f6 0%, #e5e7eb 100%);
        }
    </style>
    <x-pwa />
</head>
<body class="bg-[#F8FAFC] min-h-screen">
    <x-loading />

    {{-- NAVIGASI MODERN --}}
     <nav class="bg-white/80 backdrop-blur-md border-b border-gray-100 sticky top-0 z-50">
        <div class="max-w-5xl mx-auto px-4 h-16 flex justify-between items-center">
            <a href="/" class="group flex items-center text-xs font-extrabold text-slate-500 hover:text-blue-600 uppercase tracking-widest transition-colors">
                <div class="w-8 h-8 rounded-full border border-slate-200 flex items-center justify-center mr-3 group-hover:border-blue-200 group-hover:bg-blue-50 transition-all">
                    <i class="fas fa-chevron-left text-[10px] group-hover:-translate-x-0.5 transition-transform"></i>
                </div>
                Kembali
            </a>
            
            <div class="flex gap-4">
                @if(!auth()->check() || (auth()->check() && !auth()->user()->is_admin))
                    <a href="{{ route('cart.index') }}" class="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-500 hover:text-blue-600 transition-colors">
                        <i class="fas fa-shopping-bag"></i>
                        
                        @if(session('cart') && count(session('cart')) > 0)
                            <span class="absolute top-0 right-0 bg-red-500 text-white text-[9px] font-black w-4 h-4 flex items-center justify-center rounded-full border-2 border-white shadow-sm ring-2 ring-white">
                                {{ count(session('cart')) }}
                            </span>
                        @endif  
                    </a>
                @endif
            </div>
        </div>
    </nav>

    <main class="max-w-6xl mx-auto py-8 px-4 md:py-10">
        
        {{-- NOTIFIKASI SUKSES --}}
        @if(session('success'))
        <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl flex items-center gap-3 shadow-sm">
            <i class="fas fa-check-circle text-green-500"></i>
            <span class="font-bold">{{ session('success') }}</span>
        </div>
        @endif

        {{-- NOTIFIKASI ERROR (Untuk Peringatan Stok Ganda/Sold) --}}
        @if(session('error'))
        <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl flex items-center gap-3 shadow-sm">
            <i class="fas fa-exclamation-circle text-red-500"></i>
            <span class="font-bold">{{ session('error') }}</span>
        </div>
        @endif

        <div class="bg-white rounded-[2.5rem] shadow-xl shadow-blue-900/5 overflow-hidden border border-gray-50 flex flex-col lg:flex-row">
            
            {{-- BAGIAN KIRI: VISUAL --}}
            <div class="lg:w-3/5 product-image-container relative flex items-center justify-center p-0 overflow-hidden h-[400px] md:h-[600px]">
                <div class="absolute top-8 left-8 z-10">
                    <span class="bg-white/90 backdrop-blur px-4 py-2 rounded-2xl shadow-sm text-xs font-black uppercase tracking-widest text-blue-600 border border-blue-50">
                        {{ $product->brand }}
                    </span>
                </div>

                <div class="relative group w-full h-full"> 
                    <img src="{{ asset('storage/' . $product->image) }}" 
                        class="w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-105" 
                        alt="{{ $product->name }}">
                </div>

                @if($product->status == 'sold')
                <div class="absolute inset-0 bg-gray-900/40 backdrop-blur-[2px] flex items-center justify-center z-20">
                    <div class="bg-red-600 text-white px-8 py-3 rounded-2xl font-black text-2xl rotate-[-10deg] shadow-2xl border-4 border-white">
                        SOLD OUT
                    </div>
                </div>
                @elseif($product->status == 'booked')
                <div class="absolute inset-0 bg-gray-900/20 backdrop-blur-[1px] flex items-center justify-center z-20">
                    <div class="bg-yellow-500 text-white px-8 py-3 rounded-2xl font-black text-xl rotate-[-5deg] shadow-2xl border-4 border-white">
                        <i class="fas fa-lock mr-2"></i> SEDANG DIPESAN
                    </div>
                </div>
                @endif
            </div>

            {{-- BAGIAN KANAN: DETAIL --}}
            <div class="lg:w-2/5 p-8 md:p-12 flex flex-col">
                <div class="mb-6">
                    <h1 class="text-3xl md:text-4xl font-extrabold text-gray-900 leading-tight mb-4">
                        {{ $product->name }}
                    </h1>
                    <div class="flex items-center gap-3 mb-3">
                        <span class="text-3xl font-black text-blue-600">
                            Rp {{ number_format($product->price, 0, ',', '.') }}
                        </span>
                        <span class="text-xs bg-green-100 text-green-700 font-bold px-2 py-1 rounded-md uppercase">Original</span>
                    </div>

                    {{-- INDIKATOR STOK DITAMBAHKAN DI SINI --}}
                    @if($product->stock > 0 && $product->status == 'available')
                        <div class="inline-flex items-center gap-2 bg-emerald-50 px-3 py-1.5 rounded-lg border border-emerald-100">
                            <span class="relative flex h-2 w-2">
                              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                              <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                            </span>
                            <span class="text-sm font-bold text-emerald-700">Tersedia: {{ $product->stock }} Pcs</span>
                        </div>
                    @else
                        <div class="inline-flex items-center gap-2 bg-red-50 px-3 py-1.5 rounded-lg border border-red-100">
                            <i class="fas fa-times-circle text-red-500 text-sm"></i>
                            <span class="text-sm font-bold text-red-700">Stok Habis</span>
                        </div>
                    @endif
                    {{-- AKHIR INDIKATOR STOK --}}
                </div>

                <div class="grid grid-cols-2 gap-4 mb-8">
                    <div class="bg-gray-50 p-4 rounded-2xl">
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Ukuran</p>
                        <p class="text-lg font-bold text-gray-800">{{ $product->size }}</p>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-2xl">
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Kondisi</p>
                        <p class="text-lg font-bold text-gray-800">{{ $product->condition ?? '9/10' }}</p>
                    </div>
                </div>

                <div class="mb-10">
                    <h3 class="font-bold text-gray-900 mb-2 flex items-center gap-2">
                        <i class="fas fa-align-left text-blue-500"></i> Deskripsi Produk
                    </h3>
                    <p class="text-gray-500 text-sm leading-relaxed">
                        {{ $product->description ?? 'Item pilihan berkualitas tinggi dari brand ' . $product->brand . '. Sudah melalui proses laundry dan sterilisasi, siap langsung dipakai gaya!' }}
                    </p>
                </div>

                <div class="space-y-4 mt-auto">
                    {{-- 1. KALAU SOLD --}}
                    @if($product->status == 'sold')
                        <button disabled class="w-full bg-gray-200 text-gray-400 py-5 rounded-2xl font-bold text-lg cursor-not-allowed">
                            Barang Telah Terjual
                        </button>
                    
                    {{-- 2. KALAU BOOKED --}}
                    @elseif($product->status == 'booked')
                        <button disabled class="w-full bg-yellow-50 text-yellow-600 border-2 border-dashed border-yellow-300 py-5 rounded-2xl font-bold text-lg cursor-not-allowed">
                            Menunggu Pembayaran Customer Lain
                        </button>
                    
                    {{-- 3. KALAU AVAILABLE --}}
                    @else
                        {{-- CEK APAKAH USER ADALAH ADMIN --}}
                        @if(auth()->check() && auth()->user()->is_admin)
                            <button disabled class="w-full bg-blue-50 border-2 border-dashed border-blue-200 text-blue-400 py-5 rounded-2xl font-bold text-lg cursor-not-allowed flex justify-center items-center gap-2">
                                <i class="fas fa-lock"></i> Mode Admin (Hanya Preview)
                            </button>
                        @else
                            {{-- Tampilan Normal untuk Pembeli / Guest --}}
                           <div class="flex flex-col sm:flex-row gap-3">
                                <a href="{{ route('cart.add', $product->id) }}" 
                                   class="sm:w-1/3 flex items-center justify-center gap-2 bg-white border-[1.5px] border-slate-200 text-slate-700 py-4 rounded-2xl font-bold text-sm hover:border-blue-600 hover:text-blue-600 transition-all active:scale-[0.98]">
                                    <i class="fas fa-shopping-bag"></i> 
                                    <span>Keranjang</span>
                                </a>
                    
                                <a href="{{ route('front.buyNow', $product->id) }}" 
                                   class="sm:w-2/3 flex items-center justify-center gap-3 bg-slate-900 text-white py-4 rounded-2xl font-black text-sm uppercase tracking-widest hover:bg-blue-600 shadow-[0_10px_20px_rgba(0,0,0,0.1)] hover:shadow-blue-600/30 transition-all duration-300 active:scale-[0.98] group">
                                    <span>Beli Sekarang</span>
                                    <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>
                                </a>
                            </div>

                            <a href="https://wa.me/6289510476444?text={{ urlencode('Halo Admin, saya tertarik dengan item: ' . $product->name) }}" 
                               target="_blank"
                               class="flex items-center justify-center gap-2 w-full bg-slate-50 text-slate-500 py-3.5 rounded-xl font-bold hover:bg-slate-100 hover:text-slate-700 transition text-xs uppercase tracking-wider mt-2">
                                <i class="fab fa-whatsapp text-green-500 text-base"></i> Chat Admin untuk Detail
                            </a>
                        @endif
                    @endif
                </div>

                <div class="mt-8 pt-8 border-t border-gray-100 grid grid-cols-2 gap-4">
                    <div class="flex items-center gap-2 text-[10px] text-gray-400 font-bold uppercase tracking-tighter">
                        <i class="fas fa-truck text-blue-500"></i> Pengiriman Cepat
                    </div>
                    <div class="flex items-center gap-2 text-[10px] text-gray-400 font-bold uppercase tracking-tighter">
                        <i class="fas fa-sync text-blue-500"></i> Garansi Original
                    </div>
                </div>
            </div>
        </div>

        {{-- BAGIAN ULASAN PRODUK --}}
        <div class="mt-12 bg-white rounded-[2.5rem] shadow-xl shadow-blue-900/5 p-8 md:p-12 border border-gray-50">
            <h2 class="text-2xl font-extrabold text-gray-900 mb-6 flex items-center gap-2">
                <i class="fas fa-star text-yellow-400"></i> Ulasan Pembeli
            </h2>

            @if($product->reviews && $product->reviews->count() > 0)
                <div class="space-y-6">
                    @foreach($product->reviews as $review)
                    <div class="pb-6 border-b border-gray-100 last:border-0 last:pb-0">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold uppercase">
                                    {{ substr($review->user->name ?? 'A', 0, 1) }}
                                </div>
                                <div>
                                    <p class="font-bold text-sm text-gray-900">{{ $review->user->name ?? 'Anonim' }}</p>
                                    <div class="flex md:items-center text-xs text-yellow-400">
                                        @for($i=1; $i<=5; $i++)
                                            <i class="fas fa-star {{ $i <= $review->rating ? 'text-yellow-400' : 'text-gray-200' }}"></i>
                                        @endfor
                                        <span class="ml-2 text-gray-400">{{ $review->created_at->diffForHumans() }}</span>
                                    </div>
                                </div>
                            </div>
                            @if(auth()->check() && (auth()->id() == $review->user_id || auth()->user()->is_admin))
                                <form action="{{ route('front.review.destroy', $review->id) }}" method="POST" class="form-hapus-review">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="text-red-400 hover:text-red-600 text-xs font-bold" onclick="confirmDeleteReview(this)">Hapus</button>
                                </form>
                            @endif
                        </div>
                        
                        @if($review->review)
                            <p class="text-sm text-gray-600 mt-2 leading-relaxed">
                                "{{ $review->review }}"
                            </p>
                        @endif

                        @if($review->photo)
                            <div class="mt-3">
                                <img src="{{ asset('storage/'.$review->photo) }}" class="h-24 w-24 object-cover rounded-xl border border-gray-200 shadow-sm cursor-pointer hover:scale-105 transition" onclick="window.open(this.src)">
                            </div>
                        @endif
                    </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-10">
                    <i class="far fa-comment-dots text-4xl text-gray-300 mb-3 block"></i>
                    <p class="text-gray-500 font-medium">Belum ada ulasan untuk produk ini.</p>
                </div>
            @endif
        </div>
    </main>

    <script>
        function confirmDeleteReview(button) {
            Swal.fire({
                title: 'Hapus Ulasan?',
                text: "Ulasan yang dihapus tidak dapat dikembalikan.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#EF4444', 
                cancelButtonColor: '#94A3B8', 
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                reverseButtons: true,
                customClass: {
                    popup: 'rounded-3xl'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    button.closest('.form-hapus-review').submit();
                }
            })
        }
    </script>
</body>
</html>