@extends('layouts.admin')

@section('title', 'Detail Produk')

@section('content')
<div class="max-w-7xl mx-auto space-y-6">
    
    <!-- Header Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Detail Produk</h2>
            <p class="text-gray-500 mt-1">Informasi lengkap dan varian produk</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('produks.index') }}" 
               class="inline-flex items-center gap-2 px-4 py-2.5 border border-gray-300 text-gray-700 font-medium rounded-xl hover:bg-gray-50 transition-all duration-200">
                <i class="bi bi-arrow-left"></i>
                Kembali
            </a>
            <a href="{{ route('produks.edit', $produk->id) }}" 
               class="inline-flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white font-medium rounded-xl shadow-md shadow-amber-500/25 hover:shadow-amber-500/40 transition-all duration-200 transform hover:-translate-y-0.5">
                <i class="bi bi-pencil"></i>
                Edit Produk
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
        
        {{-- 🖼️ Kolom Kiri: Foto & Info Dasar --}}
        <div class="lg:col-span-2 space-y-6">
            
            <!-- Product Image Card -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="aspect-square bg-gradient-to-br from-gray-100 to-gray-200 relative group">
                    @if($produk->foto)
                        <img src="{{ asset('storage/' . $produk->foto) }}" 
                             alt="{{ $produk->nama }}" 
                             class="w-full h-full object-contain p-4 transition-transform duration-300 group-hover:scale-105">
                    @else
                        <div class="w-full h-full flex flex-col items-center justify-center text-gray-400">
                            <i class="bi bi-image text-6xl mb-3 opacity-50"></i>
                            <span class="text-sm font-medium">Tidak Ada Foto</span>
                        </div>
                    @endif
                    
                    <!-- Zoom hint -->
                    @if($produk->foto)
                        <div class="absolute bottom-3 right-3 px-3 py-1.5 bg-black/60 backdrop-blur-sm text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
                            <i class="bi bi-zoom-in mr-1"></i> Hover to zoom
                        </div>
                    @endif
                </div>
            </div>

            <!-- Basic Info Card -->
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-5 space-y-4">
                <div>
                    <h3 class="text-xl font-bold text-gray-800 leading-tight">{{ $produk->nama }}</h3>
                    <span class="inline-flex items-center gap-1.5 mt-3 px-3 py-1.5 bg-blue-100 text-blue-700 text-sm font-medium rounded-full">
                        <i class="bi bi-folder2-open"></i>
                        {{ $produk->kategori->nama }}
                    </span>
                </div>
                
                <div class="pt-4 border-t border-gray-100">
                    <h4 class="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
                        <i class="bi bi-file-text text-gray-400"></i>
                        Deskripsi
                    </h4>
                    <p class="text-gray-600 text-sm leading-relaxed">
                        {{ $produk->deskripsi ?? '<span class="text-gray-400 italic">Tidak ada deskripsi.</span>' }}
                    </p>
                </div>

                <!-- Quick Stats -->
                @php
                    $totalStok = $produk->varians->sum('stok');
                    $minHarga = $produk->varians->min('harga');
                    $maxHarga = $produk->varians->max('harga');
                @endphp
                <div class="grid grid-cols-2 gap-3 pt-2">
                    <div class="p-3 bg-gray-50 rounded-xl text-center">
                        <p class="text-xs text-gray-500 uppercase tracking-wide">Total Stok</p>
                        <p class="text-2xl font-bold text-gray-800 mt-1">{{ $totalStok }}</p>
                    </div>
                    <div class="p-3 bg-gray-50 rounded-xl text-center">
                        <p class="text-xs text-gray-500 uppercase tracking-wide">Harga</p>
                        <p class="text-lg font-bold text-emerald-600 mt-1">
                            @if($minHarga && $maxHarga)
                                @if($minHarga == $maxHarga)
                                    Rp {{ number_format($minHarga, 0, ',', '.') }}
                                @else
                                    <span class="text-sm">Mulai</span><br>
                                    Rp {{ number_format($minHarga, 0, ',', '.') }}
                                @endif
                            @else
                                <span class="text-gray-400 text-sm">-</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {{-- 📋 Kolom Kanan: Daftar Varian --}}
        <div class="lg:col-span-3">
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                
                <!-- Card Header -->
                <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-purple-50 flex items-center justify-between">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="bi bi-diagram-3 text-indigo-500"></i>
                        Varian Produk
                        <span class="ml-2 px-2.5 py-0.5 bg-indigo-100 text-indigo-700 text-xs font-medium rounded-full">
                            {{ $produk->varians->count() }}
                        </span>
                    </h3>
                    
                    <!-- Price Range Badge -->
                    @if($minHarga && $maxHarga && $minHarga != $maxHarga)
                        <span class="text-sm text-gray-600">
                            hingga <strong class="text-emerald-600">Rp {{ number_format($maxHarga, 0, ',', '.') }}</strong>
                        </span>
                    @endif
                </div>

                <div class="p-6">
                    @if($produk->varians->isEmpty())
                        <div class="flex flex-col items-center justify-center py-12 text-center">
                            <div class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center mb-4">
                                <i class="bi bi-exclamation-triangle text-2xl text-amber-500"></i>
                            </div>
                            <h4 class="font-semibold text-gray-700">Belum ada varian</h4>
                            <p class="text-gray-500 text-sm mt-1 mb-4">Produk ini belum memiliki varian ukuran atau warna.</p>
                            <a href="{{ route('produks.edit', $produk->id) }}" 
                               class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-xl transition-colors">
                                Tambah Varian
                            </a>
                        </div>
                    @else
                        <div class="space-y-4">
                            @foreach($produk->varians as $varian)
                                <div class="varian-card group p-4 bg-gradient-to-br from-gray-50 to-white border border-gray-200 rounded-xl hover:border-indigo-300 hover:shadow-md transition-all duration-200">
                                    <div class="flex flex-col sm:flex-row sm:items-start gap-4">
                                        
                                        <!-- Variant Info -->
                                        <div class="flex-1 min-w-0">
                                            <div class="flex items-start justify-between gap-3">
                                                <div>
                                                    <h4 class="font-bold text-gray-800 flex items-center gap-2">
                                                        <span class="px-2.5 py-1 bg-indigo-100 text-indigo-700 text-xs font-semibold rounded-lg">
                                                            {{ $varian->ukuran }}
                                                        </span>
                                                        <span class="px-2.5 py-1 bg-pink-100 text-pink-700 text-xs font-semibold rounded-lg">
                                                            {{ $varian->warna }}
                                                        </span>
                                                        
                                                        <!-- Stock Badge -->
                                                        @if($varian->stok == 0)
                                                            <span class="ml-2 px-2.5 py-1 bg-red-100 text-red-700 text-xs font-semibold rounded-full animate-pulse">
                                                                Stok Habis
                                                            </span>
                                                        @elseif($varian->stok < 5)
                                                            <span class="ml-2 px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-semibold rounded-full">
                                                                Stok Menipis
                                                            </span>
                                                        @endif
                                                    </h4>
                                                    
                                                    <div class="mt-3 space-y-1.5">
                                                        <div class="flex items-center gap-2 text-sm">
                                                            <i class="bi bi-cash text-gray-400"></i>
                                                            <span class="text-gray-600">Harga:</span>
                                                            <strong class="text-emerald-600 font-semibold">
                                                                Rp {{ number_format($varian->harga, 0, ',', '.') }}
                                                            </strong>
                                                        </div>
                                                        <div class="flex items-center gap-2 text-sm">
                                                            <i class="bi bi-box-seam text-gray-400"></i>
                                                            <span class="text-gray-600">Stok:</span>
                                                            <strong class="{{ $varian->stok < 5 ? 'text-amber-600' : 'text-gray-800' }} font-semibold">
                                                                {{ $varian->stok }} unit
                                                            </strong>
                                                        </div>
                                                        @if($varian->sku)
                                                            <div class="flex items-center gap-2 text-sm">
                                                                <i class="bi bi-upc-scan text-gray-400"></i>
                                                                <span class="text-gray-600">SKU:</span>
                                                                <code class="px-2 py-0.5 bg-gray-100 text-gray-700 rounded text-xs font-mono">
                                                                    {{ $varian->sku }}
                                                                </code>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Variant Photos -->
                                        <div class="sm:w-40 flex-shrink-0">
                                            @if($varian->photos->count())
                                                <div class="flex flex-wrap sm:flex-col gap-2">
                                                    @foreach($varian->photos as $photo)
                                                        <a href="{{ asset('storage/' . $photo->foto) }}" 
                                                           target="_blank"
                                                           class="group/photo relative block w-16 h-16 rounded-lg overflow-hidden border-2 border-white shadow-sm hover:border-indigo-400 hover:shadow-md transition-all">
                                                            <img src="{{ asset('storage/' . $photo->foto) }}" 
                                                                 alt="Foto Varian" 
                                                                 class="w-full h-full object-cover transition-transform group-hover/photo:scale-110">
                                                            <div class="absolute inset-0 bg-black/0 group-hover/photo:bg-black/20 transition-colors flex items-center justify-center">
                                                                <i class="bi bi-zoom-in text-white text-lg opacity-0 group-hover/photo:opacity-100 transition-opacity"></i>
                                                            </div>
                                                        </a>
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="w-full h-16 rounded-lg bg-gray-100 border-2 border-dashed border-gray-300 flex items-center justify-center">
                                                    <span class="text-xs text-gray-400">No photos</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .varian-card {
        animation: fadeInUp 0.3s ease-out forwards;
        opacity: 0;
    }
    .varian-card:nth-child(1) { animation-delay: 0.1s; opacity: 1; }
    .varian-card:nth-child(2) { animation-delay: 0.15s; opacity: 1; }
    .varian-card:nth-child(3) { animation-delay: 0.2s; opacity: 1; }
    .varian-card:nth-child(4) { animation-delay: 0.25s; opacity: 1; }
    .varian-card:nth-child(n+5) { animation-delay: 0.3s; opacity: 1; }
    
    @keyframes fadeInUp {
        from { 
            opacity: 0; 
            transform: translateY(12px); 
        }
        to { 
            opacity: 1; 
            transform: translateY(0); 
        }
    }
</style>
@endsection