@extends('layouts.app')

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

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-2 text-sm">
            <li>
                <a href="{{ route('marketplace.index') }}" class="text-gray-500 hover:text-gray-700">Marketplace</a>
            </li>
            <li>
                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                </svg>
            </li>
            <li>
                <span class="text-gray-700">{{ Str::limit($product->name, 30) }}</span>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Product Images -->
        <div>
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="aspect-w-1 aspect-h-1">
                    <img src="{{ $product->getFirstImageUrl() }}" 
                         alt="{{ $product->name }}"
                         class="w-full h-96 object-cover">
                </div>
                
                @if(count($product->getImageUrls()) > 1)
                    <div class="grid grid-cols-4 gap-2 p-4 border-t">
                        @foreach($product->getImageUrls() as $index => $imageUrl)
                            <img src="{{ $imageUrl }}" 
                                 alt="{{ $product->name }} - Image {{ $index + 1 }}"
                                 class="w-full h-20 object-cover rounded border-2 border-transparent hover:border-green-500 cursor-pointer"
                                 onclick="changeMainImage('{{ $imageUrl }}')">
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <!-- Product Details -->
        <div>
            <div class="bg-white rounded-lg shadow-md p-6">
                <h1 class="text-2xl font-bold text-gray-900 mb-2">{{ $product->name }}</h1>
                
                <!-- Seller Info -->
                <div class="flex items-center mb-4 p-3 bg-gray-50 rounded-lg">
                    <div class="flex-shrink-0">
                        <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
                            <span class="text-green-600 font-medium text-sm">
                                {{ strtoupper(substr($product->user->name, 0, 1)) }}
                            </span>
                        </div>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-900">{{ $product->user->company_name ?? $product->user->name }}</p>
                        <p class="text-sm text-gray-500">Verified Seller</p>
                    </div>
                </div>

                <!-- Price -->
                <div class="mb-4">
                    <span class="text-3xl font-bold text-green-600">${{ number_format($product->price, 2) }}</span>
                    <span class="ml-2 text-sm text-gray-500">per unit</span>
                </div>

                <!-- Stock -->
                <div class="mb-4">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        {{ $product->quantity }} units available
                    </span>
                </div>

                <!-- Description -->
                <div class="mb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Description</h3>
                    <p class="text-gray-700 whitespace-pre-line">{{ $product->description }}</p>
                </div>

                <!-- Category -->
                <div class="mb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Category</h3>
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                        {{ $product->category }}
                    </span>
                </div>

                <!-- Action Buttons -->
                <div class="space-y-3">
                    @if(auth()->user()->isBuyer() || auth()->user()->isAdmin())
                        <a href="{{ route('orders.create', $product) }}" 
                           class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center transition-colors">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                            </svg>
                            Place Order
                        </a>
                        
                        <form action="{{ route('chats.start', $product) }}" method="POST" class="w-full">
                            @csrf
                            <button type="submit"
                                    class="w-full bg-white hover:bg-gray-50 text-gray-700 py-3 px-4 rounded-lg font-medium border border-gray-300 flex items-center justify-center transition-colors">
                                <svg class="w-5 h-5 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"/>
                                </svg>
                                Contact Seller
                            </button>
                        </form>
                    @endif
                    
                    @if(auth()->user()->isAdmin())
                        <a href="{{ route('admin.products.show', $product) }}" 
                           class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center transition-colors">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                            </svg>
                            Admin View
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Related Products -->
    @if($relatedProducts->count() > 0)
        <div class="mt-12">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Related Products</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($relatedProducts as $relatedProduct)
                    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                        <img src="{{ $relatedProduct->getFirstImageUrl() }}" 
                             alt="{{ $relatedProduct->name }}"
                             class="w-full h-48 object-cover">
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-2 line-clamp-2">{{ $relatedProduct->name }}</h3>
                            <div class="flex items-center justify-between">
                                <span class="text-lg font-bold text-green-600">${{ number_format($relatedProduct->price, 2) }}</span>
                                <a href="{{ route('marketplace.show', $relatedProduct) }}" 
                                   class="text-green-600 hover:text-green-700 text-sm font-medium">
                                    View
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

<script>
function changeMainImage(imageUrl) {
    document.querySelector('.aspect-w-1 img').src = imageUrl;
}
</script>

<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
@endsection