@extends('layouts.admin')

@section('title', 'Wholesale Product Details')

@section('content')
<div class="py-6">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Header --}}
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 gap-4">
            <div class="flex items-center gap-3">
                <div class="p-2 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-xl shadow-sm">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 tracking-tight">{{ $wholesaleProduct->name }}</h1>
                    <p class="text-sm text-gray-500">Product details and information</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('admin.wholesale.edit', $wholesaleProduct->id) }}" class="px-4 py-2 bg-gradient-to-r from-indigo-600 to-violet-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-violet-700 transition-all text-sm flex items-center gap-2 shadow-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
                    Edit Product
                </a>
                <a href="{{ route('admin.wholesale.index') }}" class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Back to List
                </a>
                <span class="px-3 py-1 rounded-full text-xs font-medium {{ match($wholesaleProduct->status) { 'published' => 'bg-emerald-100 text-emerald-700', 'pending' => 'bg-amber-100 text-amber-700', default => 'bg-gray-100 text-gray-700' }}">
                    {{ ucfirst($wholesaleProduct->status) }}
                </span>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Main Content --}}
            <div class="lg:col-span-2 space-y-6">
                {{-- Product Images --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-indigo-100 rounded-lg">
                                <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159a2.25 2.25 0 01-3.182 3.182l-5.159-5.159a2.25 2.25 0 010-3.182L2.25 15.75z"/><circle cx="7.5" cy="7.5" r="1.875"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
                            </div>
                            <div>
                                <h2 class="text-base font-semibold text-gray-900">Product Images</h2>
                                <p class="text-xs text-gray-500">Thumbnail and gallery</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        @if($wholesaleProduct->thumbnail)
                        <div class="mb-4">
                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Thumbnail</p>
                            <img src="{{ asset('storage/' . $wholesaleProduct->thumbnail) }}" alt="{{ $wholesaleProduct->name }}" class="w-full max-w-md h-64 object-cover rounded-xl border border-gray-200 shadow-sm">
                        </div>
                        @endif

                        @if($wholesaleProduct->gallery)
                        <div>
                            <p class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Gallery ({{ count(json_decode($wholesaleProduct->gallery)) }} images)</p>
                            <div class="grid grid-cols-3 sm:grid-cols-4 gap-3">
                                @foreach(json_decode($wholesaleProduct->gallery) as $img)
                                <img src="{{ asset('storage/' . $img) }}" class="w-full h-20 object-cover rounded-lg border border-gray-200 hover:opacity-90 transition-opacity cursor-pointer">
                                @endforeach
                            </div>
                        </div>
                        @endif

                        @if(!$wholesaleProduct->thumbnail && !$wholesaleProduct->gallery)
                        <div class="text-center py-8">
                            <svg class="mx-auto w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159a2.25 2.25 0 01-3.182 3.182l-5.159-5.159a2.25 2.25 0 010-3.182L2.25 15.75z"/><circle cx="7.5" cy="7.5" r="1.875"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
                            <p class="text-sm text-gray-400 mt-2">No images uploaded</p>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Product Details --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-violet-100 rounded-lg">
                                <svg class="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.422 15.422a2.25 2.25 0 01-3.182-3.182l5.26-5.26a2.25 2.25 0 013.182 3.182l-5.26 5.26z"/></svg>
                            </div>
                            <div>
                                <h2 class="text-base font-semibold text-gray-900">Product Details</h2>
                                <p class="text-xs text-gray-500">General information</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-5">
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">SKU</p>
                                <p class="mt-1 text-sm font-medium text-gray-900">{{ $wholesaleProduct->sku ?? '—' }}</p>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Barcode</p>
                                <p class="mt-1 text-sm font-medium text-gray-900">{{ $wholesaleProduct->barcode ?? '—' }}</p>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Unit</p>
                                <p class="mt-1 text-sm font-medium text-gray-900 capitalize">{{ $wholesaleProduct->unit ?? '—' }}</p>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Base Price</p>
                                <p class="mt-1 text-lg font-bold text-indigo-600">{{ price($wholesaleProduct->price) }}</p>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Min Order Qty</p>
                                <p class="mt-1 text-sm font-medium text-gray-900">{{ number_format($wholesaleProduct->min_order_quantity) }} units</p>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Created</p>
                                <p class="mt-1 text-sm font-medium text-gray-900">{{ $wholesaleProduct->created_at->format('M d, Y') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Wholesale Pricing Tiers --}}
                @if($wholesaleProduct->wholesale_prices && count($wholesaleProduct->wholesale_prices) > 0)
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-emerald-100 rounded-lg">
                                <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <div>
                                <h2 class="text-base font-semibold text-gray-900">Wholesale Pricing Tiers</h2>
                                <p class="text-xs text-gray-500">Quantity-based discounts</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <table class="w-full">
                            <thead>
                                <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-100">
                                    <th class="pb-3 pr-2">Min Quantity</th>
                                    <th class="px-2 pb-3">Max Quantity</th>
                                    <th class="px-2 pb-3 text-right">Price per Unit</th>
                                    <th class="w-20 pb-3 text-right">Discount</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-50">
                                @foreach($wholesaleProduct->wholesale_prices as $tier)
                                @php
                                    $discount = $wholesaleProduct->price > 0 ? round((1 - ($tier['price'] / $wholesaleProduct->price)) * 100, 0) : 0;
                                @endphp
                                <tr>
                                    <td class="py-3 pr-2 text-sm font-medium text-gray-900">{{ number_format($tier['min_qty'] ?? 0) }}</td>
                                    <td class="px-2 py-3 text-sm text-gray-500">{{ $tier['max_qty'] ? number_format($tier['max_qty']) : '∞' }}</td>
                                    <td class="px-2 py-3 text-sm font-semibold text-emerald-600 text-right">{{ price($tier['price']) }}</td>
                                    <td class="py-3 text-right">
                                        @if($discount > 0)
                                        <span class="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700">-{{ $discount }}%</span>
                                        @else
                                        <span class="text-xs text-gray-400">—</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                @endif

                {{-- Stock & Shipping --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-blue-100 rounded-lg">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
                            </div>
                            <div>
                                <h2 class="text-base font-semibold text-gray-900">Stock & Shipping</h2>
                                <p class="text-xs text-gray-500">Inventory and delivery</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-5">
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Current Stock</p>
                                <p class="mt-1 text-xl font-bold {{ ($wholesaleProduct->current_stock ?? 0) <= ($wholesaleProduct->low_stock_threshold ?? 0) ? 'text-red-600' : 'text-gray-900' }}">{{ number_format($wholesaleProduct->current_stock ?? 0) }}</p>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Low Stock Alert</p>
                                <p class="mt-1 text-sm font-medium text-gray-900">{{ number_format($wholesaleProduct->low_stock_threshold ?? 0) }}</p>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Shipping Days</p>
                                <p class="mt-1 text-sm font-medium text-gray-900">{{ $wholesaleProduct->shipping_days ? $wholesaleProduct->shipping_days . ' days' : '—' }}</p>
                            </div>
                            <div>
                                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Stock Visibility</p>
                                <p class="mt-1 text-sm font-medium text-gray-900 capitalize">{{ str_replace('_', ' ', $wholesaleProduct->stock_visibility ?? 'visible_with_quantity') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Description --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-amber-100 rounded-lg">
                                <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
                            </div>
                            <div>
                                <h2 class="text-base font-semibold text-gray-900">Description</h2>
                                <p class="text-xs text-gray-500">Product details</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        @if($wholesaleProduct->short_description)
                        <div class="mb-4 p-4 bg-gray-50 rounded-lg">
                            <p class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Short Description</p>
                            <p class="text-sm text-gray-700">{{ $wholesaleProduct->short_description }}</p>
                        </div>
                        @endif
                        <div>
                            <p class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-2">Full Description</p>
                            <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-line">{{ $wholesaleProduct->description ?: 'No description provided.' }}</div>
                        </div>
                        @if($wholesaleProduct->pdf_specification)
                        <div class="mt-4 flex items-center gap-3 p-3 bg-red-50 rounded-lg border border-red-100">
                            <svg class="w-6 h-6 text-red-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
                            <div>
                                <p class="text-sm font-medium text-gray-900">{{ basename($wholesaleProduct->pdf_specification) }}</p>
                                <a href="{{ asset('storage/' . $wholesaleProduct->pdf_specification) }}" target="_blank" class="text-xs text-red-600 hover:text-red-700">View PDF →</a>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Video --}}
                @if($wholesaleProduct->video_url || $wholesaleProduct->video_provider === 'mp4')
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-rose-100 rounded-lg">
                                <svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/></svg>
                            </div>
                            <div>
                                <h2 class="text-base font-semibold text-gray-900">Product Video</h2>
                                <p class="text-xs text-gray-500">Media content</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-sm text-gray-600">
                            <span class="font-medium capitalize">{{ $wholesaleProduct->video_provider }}:</span>
                            <a href="{{ $wholesaleProduct->video_url }}" target="_blank" class="text-indigo-600 hover:text-indigo-700 ml-1">{{ $wholesaleProduct->video_url }}</a>
                        </p>
                    </div>
                </div>
                @endif
            </div>

            {{-- Sidebar --}}
            <div class="space-y-6">
                {{-- Quick Info --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <h2 class="text-base font-semibold text-gray-900">Quick Info</h2>
                    </div>
                    <div class="p-5 space-y-4">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">Cash on Delivery</span>
                            @if($wholesaleProduct->cash_on_delivery)
                            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                Enabled
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-gray-50 text-gray-500">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                Disabled
                            </span>
                            @endif
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">Refundable</span>
                            @if($wholesaleProduct->is_refundable)
                            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                Yes
                            </span>
                            @else
                            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-gray-50 text-gray-500">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                No
                            </span>
                            @endif
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">Featured</span>
                            @if($wholesaleProduct->is_featured)
                            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-amber-50 text-amber-700">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.484 2.17a.75.75 0 011.032 0l2.37 2.107a.75.75 0 00.47.213l3.136.263a.75.75 0 01.423 1.298l-2.39 2.07a.75.75 0 00-.227.646l.735 3.105a.75.75 0 01-1.092.809l-2.69-1.575a.75.75 0 00-.754 0l-2.69 1.575a.75.75 0 01-1.092-.809l.735-3.105a.75.75 0 00-.227-.646l-2.39-2.07a.75.75 0 01.423-1.298l3.136-.263a.75.75 0 00.47-.213l2.37-2.107z"/></svg>
                                Yes
                            </span>
                            @else
                            <span class="text-xs text-gray-400">No</span>
                            @endif
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">Today's Deal</span>
                            @if($wholesaleProduct->todays_deal)
                            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6l4 2"/></svg>
                                Active
                            </span>
                            @else
                            <span class="text-xs text-gray-400">No</span>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- SEO Info --}}
                @if($wholesaleProduct->meta_title || $wholesaleProduct->meta_description || $wholesaleProduct->meta_keywords)
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-teal-100 rounded-lg">
                                <svg class="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
                            </div>
                            <div>
                                <h2 class="text-base font-semibold text-gray-900">SEO</h2>
                                <p class="text-xs text-gray-500">Search engine optimization</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-5 space-y-3">
                        @if($wholesaleProduct->meta_title)
                        <div>
                            <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Meta Title</p>
                            <p class="text-sm text-gray-900 mt-0.5">{{ $wholesaleProduct->meta_title }}</p>
                        </div>
                        @endif
                        @if($wholesaleProduct->meta_description)
                        <div>
                            <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Meta Description</p>
                            <p class="text-sm text-gray-700 mt-0.5">{{ $wholesaleProduct->meta_description }}</p>
                        </div>
                        @endif
                        @if($wholesaleProduct->meta_keywords)
                        <div>
                            <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Meta Keywords</p>
                            <div class="flex flex-wrap gap-1.5 mt-1">
                                @foreach(explode(',', $wholesaleProduct->meta_keywords) as $keyword)
                                <span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{{ trim($keyword) }}</span>
                                @endforeach
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
                @endif

                {{-- Actions --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <h2 class="text-base font-semibold text-gray-900">Actions</h2>
                    </div>
                    <div class="p-5 space-y-3">
                        <a href="{{ route('admin.wholesale.edit', $wholesaleProduct->id) }}" class="block w-full text-center px-4 py-2.5 bg-gradient-to-r from-indigo-600 to-violet-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-violet-700 transition-all text-sm shadow-sm">
                            Edit Product
                        </a>
                        <form action="{{ route('admin.wholesale.toggleStatus', [$wholesaleProduct->id, 'status']) }}" method="POST">
                            @csrf
                            <button type="submit" class="block w-full px-4 py-2.5 {{ $wholesaleProduct->isPublished() ? 'bg-amber-50 text-amber-700 hover:bg-amber-100' : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100' }} font-medium rounded-lg transition-colors text-sm">
                                {{ $wholesaleProduct->isPublished() ? 'Unpublish Product' : 'Publish Product' }}
                            </button>
                        </form>
                        <form action="{{ route('admin.wholesale.destroy', $wholesaleProduct->id) }}" method="POST" onsubmit="return confirm('Move this product to trash?')">
                            @csrf
                            <button type="submit" class="block w-full px-4 py-2.5 bg-red-50 text-red-700 font-medium rounded-lg hover:bg-red-100 transition-colors text-sm">
                                Move to Trash
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Timestamps --}}
                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                        <h2 class="text-base font-semibold text-gray-900">Timestamps</h2>
                    </div>
                    <div class="p-5 space-y-3">
                        <div>
                            <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Created</p>
                            <p class="text-sm text-gray-900 mt-0.5">{{ $wholesaleProduct->created_at->format('M d, Y h:i A') }}</p>
                            <p class="text-xs text-gray-400">{{ $wholesaleProduct->created_at->diffForHumans() }}</p>
                        </div>
                        <div>
                            <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Last Updated</p>
                            <p class="text-sm text-gray-900 mt-0.5">{{ $wholesaleProduct->updated_at->format('M d, Y h:i A') }}</p>
                            <p class="text-xs text-gray-400">{{ $wholesaleProduct->updated_at->diffForHumans() }}</p>
                        </div>
                        @if($wholesaleProduct->deleted_at)
                        <div>
                            <p class="text-xs font-medium text-red-400 uppercase tracking-wider">Deleted</p>
                            <p class="text-sm text-red-600 mt-0.5">{{ $wholesaleProduct->deleted_at->format('M d, Y h:i A') }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection