@extends('admin.layouts.app')

@section('title', 'View Product')
@section('page-title', 'View Product')

@section('content')
<div class="bg-white rounded-lg shadow p-6 mb-6">
    <div class="flex items-center justify-between mb-6">
        <h3 class="text-2xl font-bold text-gray-800">{{ $product->name }}</h3>
        <div class="flex space-x-2">
            <a href="{{ route('admin.products.duplicate', $product) }}" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                <i class="fas fa-clone mr-2"></i>Duplicate
            </a>
            <a href="{{ route('admin.products.edit', $product) }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                <i class="fas fa-edit mr-2"></i>Edit
            </a>
            <a href="{{ route('admin.products.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                Back
            </a>
        </div>
    </div>

    @if($product->featured_image || count($product->gallery_images) > 0)
        <div class="mb-8">
            <h4 class="text-lg font-semibold mb-4">Images</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <p class="text-sm font-medium text-gray-500 mb-2">Featured</p>
                    @if($product->featured_image)
                        <img src="{{ $product->featured_image }}" alt="Featured" class="w-full max-w-md rounded-lg border border-gray-200 object-cover">
                    @else
                        <div class="w-full max-w-md h-48 bg-gray-100 rounded-lg border border-gray-200 flex items-center justify-center text-gray-400">
                            <i class="fas fa-image text-2xl"></i>
                        </div>
                    @endif
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500 mb-2">Gallery</p>
                    @if(count($product->gallery_images) > 0)
                        <div class="grid grid-cols-2 gap-3">
                            @foreach($product->gallery_images as $image)
                                <img src="{{ $image }}" alt="Gallery" class="w-full h-24 rounded-lg border border-gray-200 object-cover">
                            @endforeach
                        </div>
                    @else
                        <div class="w-full h-48 bg-gray-100 rounded-lg border border-gray-200 flex items-center justify-center text-gray-400">
                            <i class="fas fa-images text-2xl"></i>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <h4 class="text-lg font-semibold mb-4">Product Information</h4>
            <dl class="space-y-2">
                <div>
                    <dt class="text-sm font-medium text-gray-500">Name (Khmer)</dt>
                    <dd class="text-sm text-gray-900">{{ $product->name_km ?? 'N/A' }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Price</dt>
                    <dd class="text-sm text-gray-900">${{ number_format($product->price, 2) }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Original Price</dt>
                    <dd class="text-sm text-gray-900">${{ number_format($product->original_price, 2) }}</dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Category</dt>
                    <dd class="text-sm text-gray-900">
                        @if($product->categoryRelation)
                            @if($product->categoryRelation->isSubcategory() && $product->categoryRelation->parent)
                                {{ $product->categoryRelation->parent->name }} → {{ $product->categoryRelation->name }}
                            @else
                                {{ $product->categoryRelation->name }}
                            @endif
                        @else
                            <span class="text-gray-400">No category</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                    <dd class="text-sm">
                        @if($product->in_stock)
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">In Stock</span>
                        @else
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Out of Stock</span>
                        @endif
                        @if($product->on_sale)
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 ml-2">On Sale</span>
                        @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500">Rating</dt>
                    <dd class="text-sm text-gray-900">{{ $product->rating ?? 'N/A' }} ({{ $product->reviews ?? 0 }} reviews)</dd>
                </div>
            </dl>
        </div>

        <div>
            <h4 class="text-lg font-semibold mb-4">Description</h4>
            <p class="text-sm text-gray-700 mb-4">{{ $product->description ?? 'No description' }}</p>
            <h4 class="text-lg font-semibold mb-4">Description (Khmer)</h4>
            <p class="text-sm text-gray-700">{{ $product->description_km ?? 'No description' }}</p>
        </div>
    </div>
</div>
@endsection