@extends('layouts.admin')

@section('page-title', $product->name)

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <a href="{{ route('admin.products.index') }}" class="text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back to Products
        </a>
        <div class="flex gap-2">
            <a href="{{ route('admin.products.edit', $product) }}" class="royal-btn text-sm">Edit</a>
            <form action="{{ route('admin.products.destroy', $product) }}" method="POST" onsubmit="return confirm('Delete this product?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors">Delete</button>
            </form>
        </div>
    </div>

    <div class="royal-card overflow-hidden">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">Product Details</h3>
        </div>
        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <p class="text-sm text-gray-500">Name</p>
                <p class="font-semibold text-gray-900">{{ $product->name }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">SKU</p>
                <p class="font-semibold text-gray-900">{{ $product->sku ?? '-' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Price</p>
                <p class="font-semibold text-gray-900">${{ number_format($product->price, 2) }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Compare Price</p>
                <p class="font-semibold text-gray-900">{{ $product->compare_price ? '$' . number_format($product->compare_price, 2) : '-' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Category</p>
                <p class="font-semibold text-gray-900">{{ $product->category?->name ?? '-' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Vendor</p>
                <p class="font-semibold text-gray-900">{{ $product->vendor?->name ?? 'Admin' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Stock</p>
                <p class="font-semibold text-gray-900">{{ $product->stock_quantity }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Warehouse</p>
                @if(($product->warehouse ?? 'ghana') === 'china')
                    <span class="inline-flex items-center gap-1 px-2 py-1 bg-red-50 text-red-700 text-xs font-semibold rounded-full">🇨🇳 China ({{ $product->china_freight_days ?? 21 }} days freight)</span>
                @else
                    <span class="inline-flex items-center gap-1 px-2 py-1 bg-green-50 text-green-700 text-xs font-semibold rounded-full">🇬🇭 Ghana</span>
                @endif
            </div>
            <div>
                <p class="text-sm text-gray-500">Status</p>
                <span class="px-2 py-1 rounded text-xs font-semibold @if($product->status==='published') bg-green-100 text-green-800 @elseif($product->status==='pending') bg-yellow-100 text-yellow-800 @elseif($product->status==='rejected') bg-red-100 text-red-800 @else bg-gray-100 text-gray-800 @endif">{{ ucfirst($product->status) }}</span>
            </div>
            <div>
                <p class="text-sm text-gray-500">Digital</p>
                <p class="font-semibold text-gray-900">{{ $product->is_digital ? 'Yes' : 'No' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500">Type</p>
                <p class="font-semibold text-gray-900">{{ ucfirst($product->type ?? 'Standard') }}</p>
            </div>
        </div>
    </div>

    @if($product->description)
    <div class="royal-card overflow-hidden">
        <div class="p-6 border-b border-gray-200"><h3 class="text-lg font-semibold text-gray-900">Description</h3></div>
        <div class="p-6 text-sm text-gray-600 whitespace-pre-line">{{ $product->description }}</div>
    </div>
    @endif
</div>
@endsection