@extends('admin.layouts.app')

@section('title', 'Product Details - ' . $product->name)
@section('header_title', 'Product Details')

@section('content')
<div class="max-w-6xl mx-auto space-y-6">

    <!-- Header Actions & Title -->
    <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center space-x-2 text-xs text-slate-400 mb-1">
                <span>Dwaraka Luxury E-Commerce Portal</span>
                <span>/</span>
                <span class="text-gold-700 font-semibold">Product View</span>
            </div>
            <h2 class="font-serif text-2xl font-bold text-slate-900">{{ $product->name }}</h2>
        </div>

        <div class="flex items-center space-x-3">
            <a href="{{ route('admin.products.index') }}" class="px-4 py-2.5 bg-slate-100 text-slate-600 rounded-xl text-xs font-bold hover:bg-slate-200 transition-colors flex items-center space-x-2">
                <i class="fa-solid fa-arrow-left"></i>
                <span>BACK TO PRODUCTS</span>
            </a>
            <a href="{{ route('admin.products.edit', $product->id) }}" class="px-5 py-2.5 gold-gradient-bg text-obsidian-900 font-bold text-xs rounded-xl shadow-md hover:scale-[1.02] transition-transform flex items-center space-x-2">
                <i class="fa-solid fa-pen-to-square"></i>
                <span>EDIT PRODUCT</span>
            </a>
        </div>
    </div>

    <!-- MAIN PRODUCT DETAILS CONTENT -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

        <!-- LEFT COLUMN: IMAGE GALLERY & LIGHTBOX (5 cols) -->
        <div class="lg:col-span-5 space-y-4">
            
            <!-- Large Display Image Container -->
            <div class="bg-white p-4 rounded-3xl border border-amber-900/10 shadow-xs">
                <div class="relative aspect-square rounded-2xl overflow-hidden bg-slate-50 border border-slate-100 group cursor-pointer" onclick="openLightbox()">
                    <img id="main-view-image" 
                         src="{{ $product->primary_image_url }}" 
                         alt="{{ $product->name }}" 
                         class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                         onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=800&q=80';"
                    >
                    <div class="absolute inset-0 bg-obsidian-900/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                        <span class="px-3 py-1.5 bg-white/90 backdrop-blur-md rounded-full text-xs font-bold text-slate-900 shadow-md">
                            <i class="fa-solid fa-magnifying-glass-plus mr-1 text-gold-600"></i> Click to Zoom
                        </span>
                    </div>

                    @if($product->badge)
                        <span class="absolute top-3 left-3 bg-obsidian-900 text-gold-400 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full border border-gold-500/30">
                            {{ $product->badge }}
                        </span>
                    @endif
                </div>
            </div>

            <!-- Thumbnail Selector List -->
            @php
                $allImagesList = [];
                if (!empty($product->primary_image_url)) $allImagesList[] = ['type' => 'Primary', 'url' => $product->primary_image_url];
                if (!empty($product->hover_image_url) && $product->hover_image_url !== $product->primary_image_url) {
                    $allImagesList[] = ['type' => 'Hover', 'url' => $product->hover_image_url];
                }
                foreach ($product->additional_image_urls as $idx => $url) {
                    if (!in_array($url, array_column($allImagesList, 'url'))) {
                        $allImagesList[] = ['type' => 'Gallery ' . ($idx + 1), 'url' => $url];
                    }
                }
            @endphp

            @if(count($allImagesList) > 0)
                <div class="bg-white p-4 rounded-3xl border border-amber-900/10 shadow-xs">
                    <p class="text-[11px] font-bold uppercase tracking-wider text-slate-400 mb-3">Product Image Gallery ({{ count($allImagesList) }})</p>
                    <div class="flex items-center gap-3 overflow-x-auto pb-2 scrollbar-none">
                        @foreach($allImagesList as $index => $imgItem)
                            <button type="button" 
                                    onclick="switchMainImage('{{ $imgItem['url'] }}', this)" 
                                    class="thumb-btn relative w-20 h-20 rounded-2xl overflow-hidden border-2 transition-all flex-shrink-0 {{ $index === 0 ? 'border-gold-500 scale-105 shadow-md' : 'border-slate-200 opacity-70 hover:opacity-100' }}">
                                <img src="{{ $imgItem['url'] }}" alt="{{ $imgItem['type'] }}" class="w-full h-full object-cover">
                                <span class="absolute bottom-0 inset-x-0 bg-obsidian-900/80 text-gold-400 text-[8px] font-bold text-center py-0.5 uppercase">
                                    {{ $imgItem['type'] }}
                                </span>
                            </button>
                        @endforeach
                    </div>
                </div>
            @endif

        </div>

        <!-- RIGHT COLUMN: PRODUCT DETAILS & SPECIFICATIONS (7 cols) -->
        <div class="lg:col-span-7 space-y-6">

            <!-- Primary Info Card -->
            <div class="bg-white rounded-3xl p-6 lg:p-8 border border-amber-900/10 shadow-xs space-y-6">
                
                <!-- Category, SKU & Status -->
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 pb-4">
                    <div class="flex items-center space-x-2">
                        @if(strtolower($product->product_type ?? 'normal') === 'impon')
                            <span class="px-3 py-1 bg-amber-500 text-white font-bold text-xs rounded-full shadow-xs uppercase tracking-wider">
                                IMPON PRODUCT
                            </span>
                        @else
                            <span class="px-3 py-1 bg-slate-800 text-white font-bold text-xs rounded-full uppercase tracking-wider">
                                NORMAL PRODUCT
                            </span>
                        @endif
                        <span class="px-3 py-1 bg-amber-50 text-gold-700 font-bold text-xs rounded-full border border-amber-200 uppercase tracking-wider">
                            {{ $product->category->name ?? 'Uncategorized' }}
                        </span>
                        <span class="font-mono text-xs font-bold text-slate-500 bg-slate-100 px-2.5 py-1 rounded-lg">
                            SKU: {{ $product->sku ?? 'N/A' }}
                        </span>
                    </div>

                    <div>
                        @if($product->status === 'active')
                            <span class="px-3 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800 border border-emerald-200 flex items-center space-x-1">
                                <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                                <span>ACTIVE STORE PRODUCT</span>
                            </span>
                        @elseif($product->status === 'sold_out' || $product->stock <= 0)
                            <span class="px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-800 border border-amber-200">
                                SOLD OUT
                            </span>
                        @else
                            <span class="px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-600 border border-slate-200">
                                INACTIVE
                            </span>
                        @endif
                    </div>
                </div>

                <!-- Title & Pricing -->
                <div>
                    <h1 class="font-serif text-2xl lg:text-3xl font-bold text-slate-900 mb-3">{{ $product->name }}</h1>
                    
                    <div class="flex items-baseline space-x-4 bg-slate-50 p-4 rounded-2xl border border-slate-100">
                        <div>
                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Selling Price</p>
                            <p class="font-serif text-3xl font-bold text-slate-900">₹{{ number_format($product->price, 2) }}</p>
                        </div>

                        @if($product->original_price && $product->original_price > $product->price)
                            <div class="border-l border-slate-200 pl-4">
                                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">MRP Original</p>
                                <p class="text-lg font-bold text-slate-400 line-through">₹{{ number_format($product->original_price, 2) }}</p>
                            </div>
                        @endif

                        @if($product->discount_percentage > 0)
                            <span class="px-3 py-1 bg-obsidian-900 text-gold-400 font-bold text-xs rounded-full border border-gold-400/30">
                                {{ $product->discount_percentage }}% OFF
                            </span>
                        @endif
                    </div>
                </div>

                <!-- Display Flags / Badges -->
                <div>
                    <p class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Display Flags</p>
                    <div class="flex flex-wrap gap-2">
                        @if($product->is_new)
                            <span class="px-3 py-1 rounded-xl text-xs font-bold bg-blue-50 text-blue-700 border border-blue-200">✓ NEW ARRIVAL</span>
                        @endif
                        @if($product->is_best_seller)
                            <span class="px-3 py-1 rounded-xl text-xs font-bold bg-purple-50 text-purple-700 border border-purple-200">✓ BEST SELLER</span>
                        @endif
                        @if($product->is_featured)
                            <span class="px-3 py-1 rounded-xl text-xs font-bold bg-amber-50 text-gold-700 border border-amber-200">✓ FEATURED</span>
                        @endif
                        @if($product->is_trending)
                            <span class="px-3 py-1 rounded-xl text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">✓ TRENDING</span>
                        @endif
                        @if($product->is_sold_out)
                            <span class="px-3 py-1 rounded-xl text-xs font-bold bg-red-50 text-red-700 border border-red-200">✓ FORCE SOLD OUT</span>
                        @endif
                        @if(!$product->is_new && !$product->is_best_seller && !$product->is_featured && !$product->is_trending && !$product->is_sold_out)
                            <span class="text-xs text-slate-400 italic">No special flags assigned</span>
                        @endif
                    </div>
                </div>

                <!-- Descriptions -->
                <div class="space-y-4 pt-4 border-t border-slate-100">
                    <div>
                        <h4 class="text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Short Summary</h4>
                        <p class="text-xs text-slate-600 bg-slate-50 p-3 rounded-xl border border-slate-100">
                            {{ $product->short_description ?? 'No short summary provided.' }}
                        </p>
                    </div>

                    <div>
                        <h4 class="text-xs font-bold uppercase tracking-wider text-slate-700 mb-1">Detailed Description</h4>
                        <div class="text-xs text-slate-700 bg-slate-50 p-4 rounded-xl border border-slate-100 leading-relaxed whitespace-pre-line">
                            {{ $product->description ?? 'No detailed description specified.' }}
                        </div>
                    </div>
                </div>

                <!-- Stock Inventory Status -->
                <div class="pt-4 border-t border-slate-100 grid grid-cols-2 gap-4">
                    <div class="p-3.5 bg-slate-50 rounded-2xl border border-slate-200">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Stock Quantity</p>
                        <p class="text-sm font-bold {{ $product->stock > 0 ? 'text-emerald-700' : 'text-red-600' }}">
                            {{ $product->stock }} Units Available
                        </p>
                    </div>

                    <div class="p-3.5 bg-slate-50 rounded-2xl border border-slate-200">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Availability</p>
                        <p class="text-sm font-bold {{ $product->status === 'active' && $product->stock > 0 ? 'text-emerald-700' : 'text-amber-600' }}">
                            {{ $product->status === 'active' && $product->stock > 0 ? 'In Stock for Orders' : 'Unavailable' }}
                        </p>
                    </div>
                </div>

            </div>

            <!-- Media URLs & Audit Information Card -->
            <div class="bg-white rounded-3xl p-6 border border-amber-900/10 shadow-xs space-y-4">
                <h3 class="font-serif text-sm font-bold text-slate-900 uppercase tracking-wider border-b border-slate-100 pb-2">
                    Media URLs & System Audit
                </h3>

                <div class="space-y-3 text-xs">
                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 mb-1">Primary Image Full URL:</label>
                        <input type="text" readonly value="{{ $product->primary_image_url }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl font-mono text-[11px] text-slate-700 focus:outline-none" onclick="this.select()">
                    </div>

                    <div>
                        <label class="block text-[11px] font-bold text-slate-500 mb-1">Hover Image Full URL:</label>
                        <input type="text" readonly value="{{ $product->hover_image_url }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl font-mono text-[11px] text-slate-700 focus:outline-none" onclick="this.select()">
                    </div>

                    @if(count($product->additional_image_urls) > 0)
                        <div>
                            <label class="block text-[11px] font-bold text-slate-500 mb-1">Additional Gallery URLs ({{ count($product->additional_image_urls) }}):</label>
                            <div class="space-y-1 max-h-32 overflow-y-auto pr-1">
                                @foreach($product->additional_image_urls as $addUrl)
                                    <input type="text" readonly value="{{ $addUrl }}" class="w-full px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg font-mono text-[10px] text-slate-600" onclick="this.select()">
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                <div class="pt-3 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-400">
                    <span>Created: <strong>{{ $product->created_at ? $product->created_at->format('M d, Y h:i A') : 'N/A' }}</strong></span>
                    <span>Last Updated: <strong>{{ $product->updated_at ? $product->updated_at->format('M d, Y h:i A') : 'N/A' }}</strong></span>
                </div>
            </div>

        </div>

    </div>

</div>

<!-- LIGHTBOX MODAL -->
<div id="lightbox-modal" class="fixed inset-0 z-50 bg-obsidian-900/90 backdrop-blur-md flex items-center justify-center hidden p-4 transition-all duration-300" onclick="closeLightbox()">
    <div class="relative max-w-4xl max-h-[90vh] overflow-hidden rounded-3xl border border-gold-500/30 shadow-2xl" onclick="event.stopPropagation()">
        <button type="button" onclick="closeLightbox()" class="absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white text-white hover:text-obsidian-900 text-xl font-bold flex items-center justify-center transition-colors">
            ×
        </button>
        <img id="lightbox-img" src="{{ $product->primary_image_url }}" alt="{{ $product->name }}" class="max-h-[85vh] w-auto mx-auto object-contain rounded-2xl">
    </div>
</div>

@push('scripts')
<script>
    function switchMainImage(url, btnElement) {
        document.getElementById('main-view-image').src = url;
        document.getElementById('lightbox-img').src = url;

        document.querySelectorAll('.thumb-btn').forEach(btn => {
            btn.classList.remove('border-gold-500', 'scale-105', 'shadow-md');
            btn.classList.add('border-slate-200', 'opacity-70');
        });

        btnElement.classList.remove('border-slate-200', 'opacity-70');
        btnElement.classList.add('border-gold-500', 'scale-105', 'shadow-md');
    }

    function openLightbox() {
        document.getElementById('lightbox-modal').classList.remove('hidden');
    }

    function closeLightbox() {
        document.getElementById('lightbox-modal').classList.add('hidden');
    }
</script>
@endpush
@endsection