<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Message Seller') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <!-- Item Info -->
                    <div class="mb-6 p-4 bg-gray-50 rounded-lg">
                        <div class="flex items-center space-x-4">
                            <div class="w-16 h-16 bg-gray-200 rounded-lg overflow-hidden">
                                @if($item->primaryPhoto)
                                    <img src="{{ asset($item->primaryPhoto->url) }}" alt="{{ $item->title }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center">
                                        <span class="text-gray-400 text-xs">No Image</span>
                                    </div>
                                @endif
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg">{{ $item->title }}</h3>
                                @if($item->category)
                                    <p class="text-gray-600">{{ $item->category->name }}</p>
                                @endif
                                @if($item->price && in_array($item->listing_type, ['sale', 'inventory_open']))
                                    <p class="font-bold text-green-600">${{ number_format($item->price, 2) }}</p>
                                @else
                                    <p class="font-bold text-green-600">Trade Only</p>
                                @endif
                                <p class="text-sm text-gray-500">Seller: {{ $item->user->name }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Message Form -->
                    <form method="POST" action="{{ route('items.message.store', $item) }}">
                        @csrf
                        
                        <div class="mb-4">
                            <x-input-label for="subject" :value="__('Subject')" />
                            <x-text-input id="subject" class="block mt-1 w-full" type="text" name="subject" :value="old('subject', 'Interested in: ' . $item->title)" required />
                            <x-input-error :messages="$errors->get('subject')" class="mt-2" />
                        </div>

                        <div class="mb-6">
                            <x-input-label for="message" :value="__('Message')" />
                            <textarea id="message" name="message" rows="6" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" placeholder="Hi, I'm interested in your {{ $item->title }}. Is it still available?" required>{{ old('message') }}</textarea>
                            <x-input-error :messages="$errors->get('message')" class="mt-2" />
                        </div>

                        <div class="flex items-center justify-between">
                            <a href="{{ route('items.show', $item) }}" class="inline-flex items-center px-4 py-2 bg-gray-300 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-400 transition ease-in-out duration-150">
                                Back to Item
                            </a>
                            
                            <x-primary-button>
                                {{ __('Send Message') }}
                            </x-primary-button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</x-app-layout>