<x-app-layout
    :title="$item->title"
    :description="\Illuminate\Support\Str::limit(strip_tags($item->description), 155)"
    :image="$item->primaryPhoto?->url"
>
    <!-- JSON-LD Schema for Product -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org/",
        "@type": "Product",
        "name": "{{ $item->title }}",
        "description": "{{ \Illuminate\Support\Str::limit(strip_tags($item->description), 160) }}",
        @if($item->primaryPhoto)
        "image": "{{ asset($item->primaryPhoto->url) }}",
        @endif
        "brand": {
            "@type": "Brand",
            "name": "{{ $item->manufacturer->name ?? 'Unknown' }}"
        },
        @if($item->price && in_array($item->listing_type, ['sale', 'inventory_open']))
        "offers": {
            "@type": "Offer",
            "url": "{{ route('items.show', $item) }}",
            "priceCurrency": "USD",
            "price": "{{ $item->price }}",
            "availability": "{{ $item->status === 'sale_pending' ? 'https://schema.org/PreOrder' : 'https://schema.org/InStock' }}",
            "seller": {
                "@type": "Organization",
                "name": "{{ $item->user->name }}"
            }
        },
        @endif
        "url": "{{ route('items.show', $item) }}"
    }
    </script>

    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ $item->title }}
            </h2>
            @if(Auth::check() && Auth::user()->is_admin)
                <x-secondary-button onclick="window.location='{{ route('admin.items.show', $item) }}'">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    Admin This Item
                </x-secondary-button>
            @endif
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <!-- Flash Messages -->
            @if(session('success'))
                <div class="bg-gray-50 border border-gray-200 text-gray-700 px-4 py-3 rounded mb-6" id="success-message">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        {{ session('success') }}
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="bg-gray-50 border border-gray-200 text-gray-700 px-4 py-3 rounded mb-6" id="error-message">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        {{ session('error') }}
                    </div>
                </div>
            @endif
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Photo Gallery -->
                <div>
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6">
                            @if($item->photos->count() > 0)
                                <div class="space-y-4">
                                    <!-- Main Photo -->
                                    <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden">
                                        <img id="main-photo" src="{{ asset($item->primaryPhoto ? $item->primaryPhoto->url : $item->photos->first()->url) }}" alt="{{ $item->title }}" class="w-full h-full object-contain">
                                    </div>
                                    
                                    <!-- Thumbnail Gallery -->
                                    @if($item->photos->count() > 1)
                                        <div class="grid grid-cols-4 gap-2">
                                            @foreach($item->photos as $index => $photo)
                                                <button onclick="changeMainPhoto('{{ asset($photo->url) }}')" data-photo-index="{{ $index }}" class="thumbnail-button aspect-square bg-gray-100 rounded-lg overflow-hidden hover:ring-2 hover:ring-gray-400 transition-all">
                                                    <img src="{{ asset($photo->url) }}" alt="{{ $item->title }}" class="w-full h-full object-contain">
                                                </button>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @else
                                <div class="aspect-square bg-gray-200 rounded-lg flex items-center justify-center">
                                    <span class="text-gray-400 text-lg">No Photos</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Item Details -->
                <div class="space-y-6">
                    <!-- Main Info -->
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6">
                            <div class="flex items-center justify-between mb-4">
                                <h1 class="text-3xl font-bold text-gray-900">{{ $item->title }}</h1>
                                @if($item->status === 'sale_pending')
                                    <span class="bg-gray-100 text-gray-600 text-sm font-medium px-3 py-1 rounded-full italic">
                                        Sale Pending
                                    </span>
                                @endif
                            </div>

                            @if($item->price && in_array($item->listing_type, ['sale', 'inventory_open']))
                                <p class="text-3xl font-bold text-gray-900 mb-4">${{ number_format($item->price, 2) }}</p>
                            @else
                                <p class="text-3xl font-bold text-gray-900 mb-4">
                                    @if($item->listing_type === 'trade')
                                        Trade Only
                                    @else
                                        Personal Inventory
                                    @endif
                                </p>
                            @endif

                            <div class="space-y-3 text-sm">
                                @if($item->category)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Category:</span>
                                        <a href="{{ route('items.index', ['category' => $item->category->id]) }}" class="font-medium text-gray-900 hover:text-gray-700 underline">{{ $item->category->name }}</a>
                                    </div>
                                @endif

                                @if($item->manufacturer)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Manufacturer:</span>
                                        <a href="{{ route('items.index', ['manufacturer' => $item->manufacturer->id]) }}" class="font-medium text-gray-900 hover:text-gray-700 underline">{{ $item->manufacturer->name }}</a>
                                    </div>
                                @endif

                                @if($item->model)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Model:</span>
                                        <a href="{{ route('items.index', ['model' => $item->model]) }}" class="font-medium text-gray-900 hover:text-gray-700 underline">{{ $item->model }}</a>
                                    </div>
                                @endif

                                @if($item->year)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Year:</span>
                                        <span class="font-medium">{{ $item->year }}</span>
                                    </div>
                                @endif

                                <div class="flex justify-between">
                                    <span class="text-gray-600">Condition:</span>
                                    <span class="font-medium">{{ $item->condition }}</span>
                                </div>

                                @if($item->serial_number)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Serial Number:</span>
                                        <span class="font-medium">{{ $item->serial_number }}</span>
                                    </div>
                                @endif

                                @if($item->location_city || $item->location_state)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Location:</span>
                                        <span class="font-medium">{{ collect([$item->location_city, $item->location_state])->filter()->join(', ') }}</span>
                                    </div>
                                @endif

                                <div class="flex justify-between">
                                    <span class="text-gray-600">Views:</span>
                                    <span class="font-medium">{{ $item->views }}</span>
                                </div>

                                @if($watchersCount > 0)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Watching:</span>
                                        <span class="font-medium">{{ $watchersCount }} {{ Str::plural('person', $watchersCount) }}</span>
                                    </div>
                                @endif

                                <div class="flex justify-between">
                                    <span class="text-gray-600">Listed:</span>
                                    <span class="font-medium">{{ $item->created_at->diffForHumans() }}</span>
                                </div>
                            </div>

                            <!-- Shipping Options -->
                            @if($item->local_pickup || $item->shipping_available)
                                <div class="mt-6 p-4 bg-gray-50 rounded-lg">
                                    <h3 class="font-semibold text-gray-900 mb-2">Pickup/Shipping Options</h3>
                                    <div class="space-y-1 text-sm">
                                        @if($item->local_pickup)
                                            <div class="flex items-center text-gray-700">
                                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                                </svg>
                                                Local pickup available
                                            </div>
                                        @endif
                                        @if($item->shipping_available)
                                            <div class="flex items-center text-gray-700">
                                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                                </svg>
                                                Shipping :
                                                @if($item->shipping_buyer_pays)
                                                    Buyer pays actual cost
                                                @elseif($item->shipping_cost > 0)
                                                    ${{ number_format($item->shipping_cost, 2) }}
                                                @else
                                                    Free
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Payment Methods -->
                    @if(in_array($item->listing_type, ['sale', 'inventory_open']) && count($item->user->payment_methods_display) > 0)
                        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                            <div class="p-6">
                                <h3 class="text-lg font-semibold text-gray-900 mb-4">Accepted Payment Methods</h3>
                                <div class="grid grid-cols-2 gap-3">
                                    @foreach($item->user->payment_methods_display as $method)
                                        @php
                                            $methodNames = [
                                                'paypal' => 'PayPal',
                                                'venmo' => 'Venmo', 
                                                'cashapp' => 'Cash App',
                                                'zelle' => 'Zelle',
                                                'crypto_bitcoin' => 'Bitcoin',
                                                'crypto_ethereum' => 'Ethereum',
                                                'bank_transfer' => 'Bank Transfer',
                                                'cash' => 'Cash (In Person)'
                                            ];
                                        @endphp
                                        <div class="flex items-center p-3 bg-gray-50 border border-gray-200 rounded-lg">
                                            <svg class="w-4 h-4 text-gray-700 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                            </svg>
                                            <span class="text-sm font-medium text-gray-700">{{ $methodNames[$method] ?? ucwords(str_replace('_', ' ', $method)) }}</span>
                                        </div>
                                    @endforeach
                                </div>
                                <p class="text-xs text-gray-500 mt-3">
                                    Payment details will be shared after purchase commitment
                                </p>
                            </div>
                        </div>
                    @endif

                    <!-- Actions -->
                    @if($item->listing_type !== 'inventory')
                        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                            <div class="p-6">
                                @auth
                                    @if($item->user_id === auth()->id())
                                        <!-- Owner Actions -->
                                        <div class="space-y-3">
                                            @if($item->buyQueue->count() > 0)
                                                <a href="{{ route('items.manage-queue', $item) }}" class="w-full inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">
                                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM9 9a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                                    </svg>
                                                    Manage {{ $item->buyQueue->count() }} Buyers
                                                </a>
                                            @endif

                                            <a href="{{ route('my-items.edit', $item) }}" class="w-full inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">
                                                Edit Listing
                                            </a>
                                            
                                            @if($item->buyQueue->count() > 0)
                                                <div class="text-sm text-gray-600 p-3 bg-gray-50 rounded-lg">
                                                    <p class="font-semibold">{{ $item->buyQueue->count() }} interested buyers in queue:</p>
                                                    <div class="mt-2 space-y-1">
                                                        @foreach($item->buyQueue->take(3) as $queue)
                                                            <p class="text-xs">#{{ $queue->position }}: {{ $queue->user->name }}</p>
                                                        @endforeach
                                                        @if($item->buyQueue->count() > 3)
                                                            <p class="text-gray-500 text-xs">... and {{ $item->buyQueue->count() - 3 }} more</p>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    @else
                                        <!-- Buyer Actions -->
                                        <div class="space-y-3">
                                            @if(in_array($item->listing_type, ['sale', 'inventory_open']))
                                                @if($item->user->isOnVacation())
                                                    <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                                                        <div class="flex items-center">
                                                            <svg class="w-5 h-5 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                                                            </svg>
                                                            <p class="text-gray-700 font-semibold">Seller is currently on vacation</p>
                                                        </div>
                                                        <p class="text-gray-600 text-sm mt-1">Unable to ship items at this time</p>
                                                    </div>
                                                @elseif($userInQueue)
                                                    <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                                                        <p class="text-gray-700 font-semibold">You're in the buy queue!</p>
                                                        @if($userInQueue->position === 1)
                                                            <p class="text-gray-600 text-sm">You're the primary buyer - the seller will contact you soon!</p>
                                                        @else
                                                            <p class="text-gray-600 text-sm">You're backup buyer #{{ $userInQueue->position - 1 }} - you'll be contacted if the primary sale falls through.</p>
                                                        @endif
                                                        <form method="POST" action="{{ route('items.queue.leave', $item) }}" class="mt-3" onsubmit="return confirm('Withdraw from the buy queue for this item?')">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="text-sm text-red-600 hover:text-red-800 font-medium underline">
                                                                Changed your mind? Withdraw from queue
                                                            </button>
                                                        </form>
                                                    </div>
                                                @else
                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                                        <a href="{{ route('items.checkout', $item) }}" class="inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150 @if($item->user->isOnVacation()) opacity-50 cursor-not-allowed @endif" @if($item->user->isOnVacation()) onclick="return false;" @endif>
                                                            @if($item->status === 'sale_pending')
                                                                Sale Pending - Become Backup Buyer
                                                            @else
                                                                I'm Interested - Buy
                                                            @endif
                                                        </a>

                                                        <!-- Watchlist Button -->
                                                        <button id="watchlist-btn" onclick="toggleWatchlist()" class="inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">
                                                            <svg id="watchlist-icon" class="w-4 h-4 mr-2" viewBox="0 0 24 24">
                                                                <path id="watchlist-path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
                                                            </svg>
                                                            <span id="watchlist-text"></span>
                                                        </button>
                                                    </div>
                                                @endif
                                            @endif

                                            <a href="{{ route('items.message', $item) }}" class="w-full inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">
                                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                                                </svg>
                                                Message Seller
                                            </a>

                                            @if($item->offers_enabled)
                                                @if($userOffer)
                                                    <button type="button" onclick="document.getElementById('existing-offer-modal').classList.remove('hidden')" class="w-full inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">
                                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                        </svg>
                                                        Your Offer
                                                    </button>
                                                @else
                                                    <button type="button" onclick="document.getElementById('offer-form-modal').classList.remove('hidden')" class="w-full inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">
                                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                        </svg>
                                                        Make an Offer
                                                    </button>
                                                @endif
                                            @endif

                                            <!-- Report Button -->
                                            <a href="{{ route('reports.create', ['id' => $item->id]) }}" class="w-full inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md font-semibold text-xs text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                                                </svg>
                                                Report Item
                                            </a>
                                        </div>
                                    @endif
                                @else
                                    {{-- Guest: show action buttons, intercept clicks with login modal --}}
                                    <div
                                        x-data="{ requireLogin() { $dispatch('open-modal', 'guest-login-required') } }"
                                        class="space-y-3"
                                    >
                                        @if(in_array($item->listing_type, ['sale', 'inventory_open']))
                                            @if($item->user->isOnVacation())
                                                {{-- vacation notice (display-only, no action) --}}
                                                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                                                    <div class="flex items-center">
                                                        <svg class="w-5 h-5 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                                                        </svg>
                                                        <p class="text-gray-700 font-semibold">Seller is currently on vacation</p>
                                                    </div>
                                                    <p class="text-gray-600 text-sm mt-1">Unable to ship items at this time</p>
                                                </div>
                                            @else
                                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                                    {{-- Buy button: button (not <a>) so no href to prevent --}}
                                                    <button type="button" @click="requireLogin()"
                                                        class="inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">
                                                        @if($item->status === 'sale_pending')
                                                            Sale Pending - Become Backup Buyer
                                                        @else
                                                            I'm Interested - Buy
                                                        @endif
                                                    </button>

                                                    {{-- Watchlist: uses toggleWatchlist() which has isGuest guard --}}
                                                    <button id="watchlist-btn" onclick="toggleWatchlist()"
                                                        class="inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">
                                                        <svg id="watchlist-icon" class="w-4 h-4 mr-2" viewBox="0 0 24 24">
                                                            <path id="watchlist-path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
                                                        </svg>
                                                        <span id="watchlist-text">Add to Watchlist</span>
                                                    </button>
                                                </div>
                                            @endif
                                        @endif

                                        {{-- Message Seller: button not <a> --}}
                                        <button type="button" @click="requireLogin()"
                                            class="w-full inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">
                                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                                            </svg>
                                            Message Seller
                                        </button>

                                        {{-- Report Item intentionally omitted for guests --}}
                                    </div>
                                @endauth
                            </div>
                        </div>
                    @endif

                    <!-- Seller Info -->
                    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div class="p-6">
                            <h3 class="font-semibold text-gray-900 mb-3">Seller Information</h3>
                            <a href="{{ route('sellers.profile', $item->user) }}" class="flex items-center space-x-3 hover:bg-gray-50 p-3 rounded-lg transition-colors group">
                                <div class="w-12 h-12 bg-gray-300 rounded-full flex items-center justify-center">
                                    <span class="text-gray-600 font-semibold">{{ substr($item->user->name, 0, 1) }}</span>
                                </div>
                                <div class="flex-1">
                                    <div class="flex items-center gap-2">
                                        <p class="font-semibold text-gray-900 group-hover:text-blue-600">{{ $item->user->name }}</p>
                                        @if($item->user->isOnVacation())
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                                                </svg>
                                                On Vacation
                                            </span>
                                        @endif
                                    </div>
                                    <div class="flex items-center text-sm text-gray-600">
                                        @if($item->user->rating > 0)
                                            <span class="mr-2">⭐ {{ number_format($item->user->rating, 1) }}</span>
                                            <span>({{ $item->user->total_reviews }} reviews)</span>
                                        @else
                                            <span>New seller</span>
                                        @endif
                                    </div>
                                    @if($item->user->isOnVacation() && $item->user->vacation_message)
                                        <p class="mt-1 text-xs text-yellow-700 bg-yellow-50 p-2 rounded">
                                            {{ $item->user->vacation_message }}
                                        </p>
                                    @endif
                                </div>
                                <div class="text-gray-400 group-hover:text-blue-600">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Description -->
            <div class="mt-8 bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h2 class="text-xl font-semibold text-gray-900 mb-4">Description</h2>
                    <div class="prose max-w-none">
                        {!! nl2br(e($item->description)) !!}
                    </div>
                </div>
            </div>

            <!-- Related Items -->
            @if($relatedItems->count() > 0)
                <div class="mt-8 bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h2 class="text-xl font-semibold text-gray-900 mb-6">Similar Items</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                            @foreach($relatedItems as $relatedItem)
                                <div class="group">
                                    <a href="{{ route('items.show', $relatedItem) }}" class="block">
                                        <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden mb-3">
                                            @if($relatedItem->primaryPhoto)
                                                <img src="{{ asset($relatedItem->primaryPhoto->url) }}" alt="{{ $relatedItem->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center">
                                                    <span class="text-gray-400">No Image</span>
                                                </div>
                                            @endif
                                        </div>
                                        <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 line-clamp-2">{{ $relatedItem->title }}</h3>
                                        @if($relatedItem->price && in_array($relatedItem->listing_type, ['sale', 'inventory_open']))
                                            <p class="font-bold text-lg text-gray-900">${{ number_format($relatedItem->price, 2) }}</p>
                                        @else
                                            <p class="font-bold text-lg text-green-600">Trade Only</p>
                                        @endif
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    @guest
    <x-modal name="guest-login-required" maxWidth="sm">
        <div class="p-6">
            <div class="flex items-start justify-between mb-4">
                {{-- User icon --}}
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-900">Sign In Required</h3>
                </div>
                {{-- X close button --}}
                <button @click="$dispatch('close-modal', 'guest-login-required')" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" 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"></path>
                    </svg>
                </button>
            </div>
            <p class="text-gray-600 text-sm mb-6">
                You need an account to contact sellers, save items to your watchlist,
                or express interest in buying. It's free and only takes a moment.
            </p>
            <div class="flex flex-col sm:flex-row gap-3">
                <a href="{{ route('login') }}"
                   class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">Sign In</a>
                <a href="{{ route('register') }}"
                   class="flex-1 inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150">Create Account</a>
            </div>
        </div>
    </x-modal>
    @endguest

    <script>
        // Initialize watchlist state
        let isWatching = {{ $isWatching ? 'true' : 'false' }};
        const itemId = {{ $item->id }};
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const isGuest = {{ auth()->guest() ? 'true' : 'false' }};

        function updateWatchlistButton() {
            const btn = document.getElementById('watchlist-btn');
            const icon = document.getElementById('watchlist-icon');
            const path = document.getElementById('watchlist-path');
            const text = document.getElementById('watchlist-text');
            
            // Exit early if elements don't exist (e.g., on edit page)
            if (!btn || !icon || !path || !text) {
                return;
            }

            if (isWatching) {
                btn.className = 'w-full inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150';
                icon.setAttribute('fill', 'currentColor');
                icon.removeAttribute('stroke');
                path.setAttribute('d', 'M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z');
                text.textContent = 'Remove from Watchlist';
            } else {
                btn.className = 'w-full inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-50 transition ease-in-out duration-150';
                icon.removeAttribute('fill');
                icon.setAttribute('stroke', 'currentColor');
                path.setAttribute('d', 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z');
                text.textContent = 'Add to Watchlist';
            }
        }

        function toggleWatchlist() {
            if (isGuest) {
                window.dispatchEvent(new CustomEvent('open-modal', { detail: 'guest-login-required' }));
                return;
            }
            const btn = document.getElementById('watchlist-btn');
            btn.disabled = true;
            btn.style.opacity = '0.6';

            const url = isWatching 
                ? `/items/${itemId}/watchlist`
                : `/items/${itemId}/watchlist`;
            
            const method = isWatching ? 'DELETE' : 'POST';

            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    isWatching = !isWatching;
                    updateWatchlistButton();
                    
                    // Show success message
                    showMessage(data.message, 'success');
                } else {
                    showMessage(data.message || 'An error occurred', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showMessage('An error occurred. Please try again.', 'error');
            })
            .finally(() => {
                btn.disabled = false;
                btn.style.opacity = '1';
            });
        }

        function showMessage(message, type) {
            // Create a simple notification
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 z-50 p-4 rounded-md shadow-lg ${type === 'success' ? 'bg-green-500' : 'bg-red-500'} text-white`;
            notification.textContent = message;
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.remove();
            }, 3000);
        }

        function changeMainPhoto(url) {
            document.getElementById('main-photo').src = url;
        }

        // Initialize the button state on page load
        document.addEventListener('DOMContentLoaded', function() {
            updateWatchlistButton();
            
            // Auto-dismiss flash messages after 5 seconds
            const successMessage = document.getElementById('success-message');
            const errorMessage = document.getElementById('error-message');
            
            if (successMessage) {
                setTimeout(() => {
                    successMessage.style.transition = 'opacity 0.5s';
                    successMessage.style.opacity = '0';
                    setTimeout(() => successMessage.remove(), 500);
                }, 5000);
            }
            
            if (errorMessage) {
                setTimeout(() => {
                    errorMessage.style.transition = 'opacity 0.5s';
                    errorMessage.style.opacity = '0';
                    setTimeout(() => errorMessage.remove(), 500);
                }, 8000);
            }

            // Image modal functionality
            initializeImageModal();
        });

        // Image Modal Functions
        function initializeImageModal() {
            @if($item->photos->count() > 0)
                const photos = [
                    @foreach($item->photos as $photo)
                        '{{ asset($photo->url) }}',
                    @endforeach
                ];
                
                let currentPhotoIndex = 0;
                const modal = document.getElementById('image-modal');
                const modalImage = document.getElementById('modal-image');
                const currentImageSpan = document.getElementById('current-image');
                const totalImagesSpan = document.getElementById('total-images');
                
                // Main photo click handler
                const mainPhoto = document.getElementById('main-photo');
                mainPhoto.style.cursor = 'pointer';
                mainPhoto.addEventListener('click', function() {
                    // Find the current image index based on the main photo src
                    const currentSrc = this.src;
                    currentPhotoIndex = photos.findIndex(photo => currentSrc.includes(photo.split('/').pop()));
                    if (currentPhotoIndex === -1) currentPhotoIndex = 0;
                    
                    openModal();
                });
                
                // Thumbnail click handlers
                @if($item->photos->count() > 1)
                    const thumbnails = document.querySelectorAll('.thumbnail-button');
                    thumbnails.forEach((thumbnail) => {
                        thumbnail.style.cursor = 'pointer';
                        
                        // Add double-click to open modal
                        thumbnail.addEventListener('dblclick', function(e) {
                            e.preventDefault();
                            currentPhotoIndex = parseInt(this.getAttribute('data-photo-index'));
                            openModal();
                        });
                    });
                @endif
                
                // Modal controls
                document.getElementById('modal-close').addEventListener('click', closeModal);
                document.getElementById('modal-prev').addEventListener('click', showPreviousImage);
                document.getElementById('modal-next').addEventListener('click', showNextImage);
                
                // Image click for full-size inspection
                modalImage.addEventListener('click', openFullSizeView);
                
                // Close modal on background click
                modal.addEventListener('click', function(e) {
                    if (e.target === modal) {
                        closeModal();
                    }
                });
                
                // Keyboard navigation
                document.addEventListener('keydown', function(e) {
                    if (!modal.classList.contains('hidden')) {
                        switch(e.key) {
                            case 'Escape':
                                closeModal();
                                break;
                            case 'ArrowLeft':
                                showPreviousImage();
                                break;
                            case 'ArrowRight':
                                showNextImage();
                                break;
                        }
                    }
                });
                
                function openModal() {
                    updateModalImage();
                    modal.classList.remove('hidden');
                    document.body.style.overflow = 'hidden'; // Prevent background scrolling
                }
                
                function closeModal() {
                    modal.classList.add('hidden');
                    document.body.style.overflow = ''; // Restore scrolling
                }
                
                function showPreviousImage() {
                    currentPhotoIndex = (currentPhotoIndex - 1 + photos.length) % photos.length;
                    updateModalImage();
                }
                
                function showNextImage() {
                    currentPhotoIndex = (currentPhotoIndex + 1) % photos.length;
                    updateModalImage();
                }
                
                function updateModalImage() {
                    modalImage.src = photos[currentPhotoIndex];
                    currentImageSpan.textContent = currentPhotoIndex + 1;
                    
                    // Show/hide navigation arrows for single images
                    const prevButton = document.getElementById('modal-prev');
                    const nextButton = document.getElementById('modal-next');
                    if (photos.length <= 1) {
                        prevButton.style.display = 'none';
                        nextButton.style.display = 'none';
                    } else {
                        prevButton.style.display = 'block';
                        nextButton.style.display = 'block';
                    }
                }
                
                // Full-size inspection functions
                function openFullSizeView() {
                    const fullSizeModal = document.getElementById('fullsize-modal');
                    const fullSizeImage = document.getElementById('fullsize-image');
                    
                    fullSizeImage.src = photos[currentPhotoIndex];
                    fullSizeModal.classList.remove('hidden');
                    // Don't prevent body scrolling for full-size view - we want the modal to be scrollable
                }
                
                function closeFullSizeView() {
                    const fullSizeModal = document.getElementById('fullsize-modal');
                    fullSizeModal.classList.add('hidden');
                    // No need to restore body scrolling since we didn't disable it
                }
                
                // Full-size modal controls
                document.getElementById('fullsize-close').addEventListener('click', closeFullSizeView);
                
                // Close full-size on Escape key
                document.addEventListener('keydown', function(e) {
                    const fullSizeModal = document.getElementById('fullsize-modal');
                    if (!fullSizeModal.classList.contains('hidden') && e.key === 'Escape') {
                        closeFullSizeView();
                    }
                });
            @endif
        }
    </script>

    <!-- Image Modal -->
    <div id="image-modal" class="fixed inset-0 bg-white bg-opacity-50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
        <div class="relative bg-white rounded-lg shadow-2xl w-full h-full max-w-6xl max-h-[90vh] flex flex-col">
            <!-- Close Button - Upper Right Corner of Modal -->
            <button id="modal-close" class="absolute top-4 right-4 bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg shadow-lg z-50 flex items-center space-x-2 transition-colors">
                <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="M6 18L18 6M6 6l12 12"></path>
                </svg>
                <span>Return to listing</span>
            </button>
            
            <!-- Main Image Container -->
            <div class="flex items-center justify-center flex-1 p-8 relative min-h-0 overflow-hidden">
                <img id="modal-image" src="" alt="{{ $item->title }}" class="max-w-[calc(100vw-8rem)] max-h-[calc(100vh-12rem)] w-auto h-auto object-contain rounded cursor-pointer" style="max-width: calc(100vw - 8rem); max-height: calc(100vh - 12rem);" title="Click to view full size">
                
                <!-- Previous Arrow - Centered on Image Area -->
                <button id="modal-prev" class="absolute left-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-90 hover:bg-opacity-100 text-gray-800 z-10 p-3 rounded-full shadow-lg transition-all">
                    <svg class="w-6 h-6" 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"></path>
                    </svg>
                </button>
                
                <!-- Next Arrow - Centered on Image Area -->
                <button id="modal-next" class="absolute right-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-90 hover:bg-opacity-100 text-gray-800 z-10 p-3 rounded-full shadow-lg transition-all">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </button>
            </div>
            
            <!-- Image Counter - Bottom of Modal -->
            <div class="flex justify-center p-4">
                <div id="modal-counter" class="text-gray-800 bg-gray-100 px-4 py-2 rounded-lg font-medium">
                    <span id="current-image">1</span> / <span id="total-images">{{ $item->photos->count() }}</span>
                </div>
                <div class="text-gray-600 text-sm px-4 py-2">
                    Click to see full size image
                </div>
            </div>
        </div>
    </div>

    <!-- Full-Size Image Inspection Modal -->
    <div id="fullsize-modal" class="fixed inset-0 bg-black hidden" style="z-index: 9999; overflow: auto; -webkit-overflow-scrolling: touch;">
        <!-- Close Button for Full-Size View -->
        <button id="fullsize-close" class="fixed top-4 right-4 bg-white hover:bg-gray-100 text-gray-800 font-medium py-3 px-6 rounded-lg shadow-lg flex items-center space-x-2 transition-colors" style="z-index: 10000;">
            <svg class="w-5 h-5" 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"></path>
            </svg>
            <span>Return to gallery</span>
        </button>
        
        <!-- Full-Size Image - No Restrictions -->
        <img id="fullsize-image" src="" alt="{{ $item->title }}" class="block mx-auto my-8" style="max-width: none; max-height: none; min-height: 100vh;">
    </div>

    <!-- Make an Offer Modal (Fixed Position) -->
    <div id="offer-form-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">Make an Offer</h3>
                    <button type="button" onclick="document.getElementById('offer-form-modal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
                        <svg class="w-6 h-6" 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"></path>
                        </svg>
                    </button>
                </div>

                <form method="POST" action="{{ route('offers.store', $item) }}" class="space-y-4">
                    @csrf

                    <!-- Original Price Display -->
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <div class="text-sm text-gray-600">Listed Price</div>
                        <div class="text-2xl font-bold text-gray-900">${{ number_format($item->price, 2) }}</div>
                    </div>

                    <!-- Offer Price -->
                    <div>
                        <x-input-label for="offered_price" :value="__('Your Offer Price')" />
                        <x-text-input
                            id="offered_price"
                            name="offered_price"
                            type="number"
                            step="0.01"
                            min="0.01"
                            placeholder="Enter your offer"
                            class="block mt-1 w-full"
                            required
                        />
                        <x-input-error :messages="$errors->get('offered_price')" class="mt-2" />
                    </div>

                    <!-- Offer Type -->
                    <div>
                        <label class="block mb-3">
                            <input type="radio" name="is_committed" value="1" checked class="mr-2">
                            <span class="font-semibold text-gray-900">Committed Offer</span>
                            <span class="block text-sm text-gray-600 ml-6">I'm serious about buying at this price</span>
                        </label>
                        <label class="block">
                            <input type="radio" name="is_committed" value="0" class="mr-2">
                            <span class="font-semibold text-gray-900">No-Commit Offer</span>
                            <span class="block text-sm text-gray-600 ml-6">Just giving feedback on pricing - fun offer with no commitment</span>
                        </label>
                    </div>

                    <!-- Message -->
                    <div>
                        <x-input-label for="message" :value="__('Message (Optional)')" />
                        <textarea
                            id="message"
                            name="message"
                            placeholder="Add a message to the seller..."
                            class="block mt-1 w-full border-gray-300 focus:border-gray-400 focus:ring-gray-400 rounded-md shadow-sm"
                            rows="3"
                            maxlength="500"
                        ></textarea>
                        <p class="text-xs text-gray-500 mt-1">Up to 500 characters</p>
                        <x-input-error :messages="$errors->get('message')" class="mt-2" />
                    </div>

                    <!-- Info Box -->
                    <div class="p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
                        <p class="font-semibold mb-1">About Offers:</p>
                        <ul class="list-disc list-inside space-y-1 text-xs">
                            <li><strong>Committed:</strong> Shows you're serious - seller can accept or counter</li>
                            <li><strong>No-Commit:</strong> Fun feedback on pricing - seller will understand it's not binding</li>
                            <li>Offers expire after 3 days if not accepted or countered</li>
                        </ul>
                    </div>

                    <!-- Actions -->
                    <div class="flex gap-3 pt-4 border-t">
                        <button type="button" onclick="document.getElementById('offer-form-modal').classList.add('hidden')" class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-gray-700 font-semibold hover:bg-gray-50 transition">
                            Cancel
                        </button>
                        <button type="submit" class="flex-1 px-4 py-2 bg-gray-800 text-white font-semibold rounded-md hover:bg-gray-700 transition">
                            Submit Offer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Existing Offer Modal -->
    @if($userOffer)
    <div id="existing-offer-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">Your Offer</h3>
                    <button type="button" onclick="document.getElementById('existing-offer-modal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
                        <svg class="w-6 h-6" 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"></path>
                        </svg>
                    </button>
                </div>

                <div class="space-y-4">
                    <!-- Offer Price -->
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <div class="text-sm text-gray-600">Your Offer</div>
                        <div class="text-2xl font-bold text-gray-900">${{ number_format($userOffer->offered_price, 2) }}</div>
                    </div>

                    <!-- Listed Price -->
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <div class="text-sm text-gray-600">Listed Price</div>
                        <div class="text-lg font-semibold text-gray-900">${{ number_format($item->price, 2) }}</div>
                        <div class="text-xs text-gray-500 mt-1">
                            @if($userOffer->offered_price < $item->price)
                                {{ number_format(round((1 - $userOffer->offered_price / $item->price) * 100), 0) }}% off
                            @elseif($userOffer->offered_price > $item->price)
                                +{{ number_format(round(($userOffer->offered_price / $item->price - 1) * 100), 0) }}% above asking
                            @else
                                Asking price
                            @endif
                        </div>
                    </div>

                    <!-- Offer Type Badge -->
                    <div class="p-3 rounded-lg {{ $userOffer->is_committed ? 'bg-blue-50 border border-blue-200' : 'bg-purple-50 border border-purple-200' }}">
                        <div class="text-sm font-semibold {{ $userOffer->is_committed ? 'text-blue-900' : 'text-purple-900' }}">
                            {{ $userOffer->getOfferTypeLabel() }}
                        </div>
                        <div class="text-xs {{ $userOffer->is_committed ? 'text-blue-700' : 'text-purple-700' }} mt-1">
                            @if($userOffer->is_committed)
                                You're serious about this offer
                            @else
                                Fun offer with no commitment
                            @endif
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <div class="text-sm text-gray-600">Status</div>
                        <div class="text-sm font-semibold text-gray-900">
                            @if($userOffer->status === 'pending')
                                <span class="text-blue-600">Waiting for seller response</span>
                            @elseif($userOffer->status === 'counter_offered')
                                <span class="text-yellow-600">Seller made a counter offer</span>
                            @elseif($userOffer->status === 'accepted')
                                <span class="text-green-600">Accepted!</span>
                            @elseif($userOffer->status === 'rejected')
                                <span class="text-red-600">Rejected</span>
                            @elseif($userOffer->status === 'expired')
                                <span class="text-gray-600">Expired</span>
                            @endif
                        </div>
                    </div>

                    <!-- Expiration Timer -->
                    @if($userOffer->status === 'pending' || $userOffer->status === 'counter_offered')
                    <div class="p-3 bg-orange-50 border border-orange-200 rounded-lg">
                        <div class="text-sm text-gray-600">Expires in</div>
                        <div class="text-sm font-semibold text-orange-900" id="offer-timer">
                            {{ now()->diffInHours($userOffer->expires_at) }}h remaining
                        </div>
                    </div>
                    @endif

                    <!-- Counter Offer Info -->
                    @if($userOffer->status === 'counter_offered' && $userOffer->counter_price)
                    <div class="p-3 border-l-4 border-yellow-400 bg-yellow-50 rounded-lg">
                        <div class="text-sm font-semibold text-gray-900">Seller's Counter Offer</div>
                        <div class="text-2xl font-bold text-gray-900 mt-2">${{ number_format($userOffer->counter_price, 2) }}</div>
                        @if($userOffer->seller_message)
                        <div class="text-sm text-gray-700 mt-2">
                            <strong>Message:</strong> {{ $userOffer->seller_message }}
                        </div>
                        @endif
                    </div>
                    @endif

                    <!-- Message -->
                    @if($userOffer->message)
                    <div class="p-3 bg-blue-50 border border-blue-200 rounded-lg">
                        <div class="text-sm font-semibold text-gray-900 mb-1">Your Message</div>
                        <div class="text-sm text-gray-700">{{ $userOffer->message }}</div>
                    </div>
                    @endif

                    <!-- Actions -->
                    <div class="flex gap-2 pt-4 border-t">
                        @if($userOffer->status === 'counter_offered')
                            <form method="POST" action="{{ route('offers.accept', $userOffer) }}" class="flex-1">
                                @csrf
                                <button type="submit" class="w-full px-4 py-2 bg-green-600 text-white font-semibold rounded-md hover:bg-green-700 transition">
                                    Accept Counter
                                </button>
                            </form>
                        @endif
                        @if(in_array($userOffer->status, ['pending', 'counter_offered']))
                            <form method="POST" action="{{ route('offers.withdraw', $userOffer) }}" class="flex-1">
                                @csrf
                                <button type="submit" class="w-full px-4 py-2 border border-gray-300 text-gray-700 font-semibold rounded-md hover:bg-gray-50 transition">
                                    Withdraw
                                </button>
                            </form>
                        @endif
                        <button type="button" onclick="document.getElementById('existing-offer-modal').classList.add('hidden')" class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-gray-700 font-semibold hover:bg-gray-50 transition">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</x-app-layout>