<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $product->name }} - Vogue3D</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,800&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
    </style>
</head>

<body class="{{ Auth::user()->role == 'admin' ? 'bg-slate-50' : 'bg-[#fff9fa]' }} min-h-screen text-slate-900">

@php
    $reviews        = $product->reviews()->with('user')->latest()->get();
    $totalReviews   = $reviews->count();
    $avg            = $totalReviews > 0 ? number_format($product->reviews()->avg('rating'), 1) : 0;
@endphp

<div class="max-w-6xl mx-auto px-4 py-10">

    {{-- NAV --}}
    <div class="flex justify-between items-center mb-10">
        <a href="javascript:history.back()"
           class="group flex items-center gap-2 font-bold text-slate-400 hover:text-pink-500 transition-all">
            <i data-lucide="arrow-left" class="w-5 h-5 group-hover:-translate-x-1 transition-transform"></i>
            Kembali
        </a>
        @if(Auth::user()->role == 'admin')
        <div class="flex items-center gap-2 bg-slate-900 text-white px-5 py-2.5 rounded-2xl">
            <i data-lucide="shield-check" class="w-4 h-4 text-pink-400"></i>
            <span class="text-[10px] font-black uppercase tracking-widest">Admin Mode</span>
        </div>
        @endif
    </div>

    {{-- CARD UTAMA --}}
    <div class="bg-white rounded-[48px] overflow-hidden flex flex-col lg:flex-row shadow-xl shadow-slate-100 border border-slate-100 relative">

        {{-- BADGE STOK --}}
        <div class="absolute top-8 left-8 z-10">
            <span class="px-4 py-2 bg-white shadow-lg rounded-2xl text-[11px] font-black text-slate-800 flex items-center gap-2 uppercase tracking-tight border border-slate-50">
                <span class="w-2 h-2 rounded-full {{ $product->stock > 0 ? 'bg-emerald-500 animate-pulse' : 'bg-red-500' }}"></span>
                {{ $product->stock > 0 ? 'Stok: ' . $product->stock : 'Habis' }}
            </span>
        </div>

        {{-- LEFT: IMAGE --}}
        <div class="lg:w-[45%] p-6">
            <div class="aspect-square rounded-[36px] overflow-hidden bg-slate-50 border border-slate-100 group">
                <img src="{{ asset('storage/' . $product->image) }}"
                     class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
            </div>
        </div>

        {{-- RIGHT: CONTENT --}}
        <div class="lg:w-[55%] p-8 lg:p-14 flex flex-col justify-center">

            {{-- Kategori --}}
            <div class="mb-4">
                <span class="px-3 py-1 bg-pink-50 text-pink-500 font-bold uppercase tracking-[0.2em] text-[10px] rounded-full border border-pink-100">
                    {{ $product->category->name }}
                </span>
            </div>

            {{-- Nama Produk --}}
            <h1 class="text-4xl md:text-5xl font-black text-slate-900 mb-6 tracking-tight leading-tight uppercase italic">
                {{ $product->name }}
            </h1>

            {{-- Rating & Harga --}}
            <div class="flex flex-wrap items-center gap-4 mb-8">
                <div class="flex items-center gap-2 bg-slate-50 px-4 py-2 rounded-2xl border border-slate-100">
                    <i data-lucide="star" class="w-4 h-4 fill-amber-400 text-amber-400"></i>
                    <span class="font-black text-slate-900 text-sm">
                        {{ $totalReviews > 0 ? $avg : 'Baru' }}
                    </span>
                    <span class="text-slate-400 text-xs font-bold">({{ $totalReviews }} ulasan)</span>
                </div>
                <div class="text-3xl font-black text-slate-900 flex items-baseline gap-1">
                    <span class="text-base font-bold text-pink-500">Rp</span>
                    {{ number_format($product->price, 0, ',', '.') }}
                </div>
            </div>

            {{-- Deskripsi --}}
            <p class="text-slate-500 text-base leading-relaxed mb-10 font-medium">
                {{ $product->description ?? 'Tidak ada deskripsi.' }}
            </p>

            {{-- ACTION BUTTONS --}}
            @if(Auth::user()->role == 'admin')
            <div class="flex gap-4">
                <a href="{{ route('admin.products.edit', $product->id) }}"
                   class="flex-[3] bg-slate-900 hover:bg-slate-800 text-white text-center font-bold py-5 rounded-[24px] uppercase text-xs tracking-[0.2em] flex items-center justify-center gap-3 transition-all hover:-translate-y-0.5 shadow-lg shadow-slate-200">
                    <i data-lucide="edit-3" class="w-4 h-4"></i> Edit Produk
                </a>
                <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" class="flex-1"
                      onsubmit="return confirm('Yakin hapus produk ini?')">
                    @csrf @method('DELETE')
                    <button class="w-full h-full bg-red-50 text-red-400 font-bold rounded-[24px] hover:bg-red-500 hover:text-white transition-all flex items-center justify-center border border-red-100">
                        <i data-lucide="trash-2" class="w-5 h-5"></i>
                    </button>
                </form>
            </div>

            @elseif(Auth::user()->role == 'user')
            <div class="flex gap-4">
                @if($product->stock > 0)
                    <a href="{{ route('user.cart.checkout', $product->id) }}"
                       class="flex-[3] bg-slate-900 hover:bg-pink-500 text-white font-black h-16 rounded-[24px] transition-all text-xs flex items-center justify-center uppercase tracking-[0.3em] shadow-lg shadow-slate-200 hover:-translate-y-0.5">
                        Checkout Sekarang
                    </a>
                    <form action="{{ route('user.cart.add', $product->id) }}" method="POST" class="flex-1">
                        @csrf
                        <button type="submit"
                                class="w-full h-16 bg-white text-slate-900 border-2 border-slate-900 rounded-[24px] hover:bg-slate-900 hover:text-white transition-all flex items-center justify-center group">
                            <i data-lucide="shopping-bag" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
                        </button>
                    </form>
                @else
                    <div class="flex-1 h-16 bg-slate-100 text-slate-400 rounded-[24px] flex items-center justify-center font-black text-xs uppercase tracking-widest">
                        Stok Habis
                    </div>
                @endif
            </div>

            @else
            {{-- Kurir: hanya lihat --}}
            <div class="h-16 bg-slate-50 text-slate-400 rounded-[24px] flex items-center justify-center font-black text-xs uppercase tracking-widest border border-slate-100">
                Mode Kurir — Tidak bisa membeli
            </div>
            @endif

        </div>
    </div>

    {{-- ⭐ REVIEW SECTION --}}
    <div class="mt-20">
        <div class="flex flex-col items-center mb-12 text-center">
            <p class="text-[10px] font-black text-pink-500 uppercase tracking-[0.3em] mb-2">Ulasan Pembeli</p>
            <h2 class="text-3xl font-black text-slate-900 uppercase italic tracking-tighter mb-3">
                Apa Kata Mereka?
            </h2>
            <div class="w-12 h-1 bg-pink-500 rounded-full"></div>
        </div>

        @if($totalReviews > 0)

        {{-- Summary Rating --}}
        <div class="bg-white rounded-[32px] border border-slate-100 shadow-sm p-8 mb-10 flex flex-col md:flex-row items-center gap-8">
            <div class="text-center">
                <p class="text-7xl font-black text-slate-900 leading-none">{{ $avg }}</p>
                <div class="flex justify-center gap-1 mt-3">
                    @for($s = 1; $s <= 5; $s++)
                        <i data-lucide="star" class="w-5 h-5 {{ $s <= round($avg) ? 'fill-amber-400 text-amber-400' : 'text-slate-200' }}"></i>
                    @endfor
                </div>
                <p class="text-xs text-slate-400 font-bold mt-2">dari {{ $totalReviews }} ulasan</p>
            </div>
            <div class="flex-1 w-full space-y-2">
                @for($s = 5; $s >= 1; $s--)
                @php
                    $count = $reviews->where('rating', $s)->count();
                    $pct   = $totalReviews > 0 ? ($count / $totalReviews) * 100 : 0;
                @endphp
                <div class="flex items-center gap-3">
                    <span class="text-xs font-black text-slate-500 w-4">{{ $s }}</span>
                    <i data-lucide="star" class="w-3 h-3 fill-amber-400 text-amber-400 shrink-0"></i>
                    <div class="flex-1 bg-slate-100 rounded-full h-2 overflow-hidden">
                        <div class="bg-amber-400 h-2 rounded-full transition-all duration-700"
                             style="width: {{ $pct }}%"></div>
                    </div>
                    <span class="text-xs font-bold text-slate-400 w-6 text-right">{{ $count }}</span>
                </div>
                @endfor
            </div>
        </div>

        {{-- Review Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($reviews as $review)
            <div class="bg-white rounded-[32px] p-7 border border-slate-50 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between">
                <div>
                    {{-- Header --}}
                    <div class="flex items-center justify-between mb-5">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center text-white font-black text-xs shrink-0">
                                {{ strtoupper(substr($review->user->name, 0, 1)) }}
                            </div>
                            <div>
                                <p class="font-black text-slate-900 text-xs">{{ $review->user->name }}</p>
                                <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest">
                                    {{ $review->created_at->diffForHumans() }}
                                </p>
                            </div>
                        </div>
                        <div class="flex items-center gap-0.5 bg-amber-50 px-2 py-1 rounded-lg">
                            @for($s = 1; $s <= 5; $s++)
                                <i data-lucide="star" class="w-3 h-3 {{ $s <= $review->rating ? 'fill-amber-400 text-amber-400' : 'text-slate-200' }}"></i>
                            @endfor
                        </div>
                    </div>

{{-- Komentar --}}
@if($review->comment)
<p class="text-slate-500 font-medium leading-relaxed italic text-sm">
    "{{ $review->comment }}"
</p>
@else
<p class="text-slate-300 font-medium italic text-sm">Tidak ada komentar.</p>
@endif

{{-- Foto Review --}}
@if($review->image)
<div class="mt-4">
    <img src="{{ asset('storage/' . $review->image) }}"
         class="w-full h-40 object-cover rounded-2xl border border-slate-100 cursor-pointer hover:opacity-90 transition"
         onclick="openImageModal('{{ asset('storage/' . $review->image) }}')">
</div>
@endif
                </div>
            </div>
            @endforeach
        </div>

        @else
        {{-- Belum ada review --}}
        <div class="text-center py-20 bg-white rounded-[40px] border-2 border-dashed border-pink-100">
            <div class="text-5xl mb-4">⭐</div>
            <p class="font-black text-slate-700 text-lg italic">Belum ada ulasan untuk produk ini.</p>
            <p class="text-slate-400 text-sm mt-1">Jadilah yang pertama memberi ulasan!</p>
        </div>
        @endif
    </div>

</div>

{{-- Modal Preview Foto Review --}}
<div id="image-modal"
     class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[9999] hidden items-center justify-center p-4"
     onclick="closeImageModal()">
    <div class="relative max-w-2xl w-full" onclick="event.stopPropagation()">
        <img id="modal-image" src="" class="w-full rounded-3xl shadow-2xl object-contain max-h-[80vh]">
        <button onclick="closeImageModal()"
                class="absolute -top-4 -right-4 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center text-slate-600 hover:text-red-500 transition">
            <i data-lucide="x" class="w-5 h-5"></i>
        </button>
    </div>
</div>

<script>
function openImageModal(src) {
    document.getElementById('modal-image').src = src;
    const modal = document.getElementById('image-modal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}
function closeImageModal() {
    const modal = document.getElementById('image-modal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}


lucide.createIcons();

</script>
</body>
</html>