@extends('layouts.app')

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

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">

    {{-- Breadcrumb --}}
    <nav class="text-sm text-gray-500 mb-6">
        <a href="{{ route('home') }}" class="hover:text-red-600">Home</a> /
        <a href="{{ route('shop.index') }}" class="hover:text-red-600">Shop</a> /
        <a href="{{ route('shop.category', $product->category->slug) }}" class="hover:text-red-600">{{ $product->category->name }}</a> /
        <span class="text-gray-800">{{ $product->name }}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 mb-12">

        {{-- Product Images --}}
        <div>
            <div class="bg-white rounded-xl overflow-hidden shadow-sm mb-3">
                <img id="main-image" src="{{ $product->thumbnail_url }}" alt="{{ $product->name }}" class="w-full h-96 object-contain p-4">
            </div>
            @if($product->images->count() > 0)
            <div class="flex gap-2 overflow-x-auto">
                <img src="{{ $product->thumbnail_url }}" alt="" onclick="document.getElementById('main-image').src=this.src"
                    class="w-20 h-20 object-cover rounded-lg border-2 border-red-400 cursor-pointer flex-shrink-0">
                @foreach($product->images as $image)
                <img src="{{ $image->url }}" alt="" onclick="document.getElementById('main-image').src=this.src"
                    class="w-20 h-20 object-cover rounded-lg border-2 border-gray-200 hover:border-red-400 cursor-pointer flex-shrink-0">
                @endforeach
            </div>
            @endif
        </div>

        {{-- Product Info --}}
        <div>
            <div class="flex items-start justify-between mb-2">
                <div>
                    @if($product->brand)
                        <a href="{{ route('shop.brand', $product->brand->slug) }}" class="text-sm text-red-600 font-medium">{{ $product->brand->name }}</a>
                    @endif
                    <h1 class="text-2xl font-bold text-gray-900 mt-1">{{ $product->name }}</h1>
                </div>
                @auth
                <form action="{{ route('wishlist.toggle') }}" method="POST">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <button type="submit" class="text-gray-400 hover:text-red-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                    </button>
                </form>
                @endauth
            </div>

            {{-- Rating --}}
            <div class="flex items-center gap-2 mb-4">
                <div class="flex">
                    @for($i = 1; $i <= 5; $i++)
                        <svg class="w-4 h-4 {{ $i <= $product->average_rating ? 'text-yellow-400' : 'text-gray-300' }}" fill="currentColor" viewBox="0 0 20 20"><path 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"/></svg>
                    @endfor
                </div>
                <span class="text-sm text-gray-500">({{ $product->reviews->where('is_approved', true)->count() }} reviews)</span>
            </div>

            {{-- Price --}}
            <div class="mb-4">
                @if($product->sale_price)
                    <span class="text-3xl font-bold text-red-600">${{ number_format($product->sale_price, 2) }}</span>
                    <span class="text-xl text-gray-400 line-through ml-2">${{ number_format($product->price, 2) }}</span>
                    <span class="ml-2 bg-red-100 text-red-600 text-sm px-2 py-1 rounded">
                        {{ round((($product->price - $product->sale_price) / $product->price) * 100) }}% OFF
                    </span>
                @else
                    <span class="text-3xl font-bold text-gray-900">${{ number_format($product->price, 2) }}</span>
                @endif
            </div>

            {{-- Stock & Condition --}}
            <div class="flex gap-4 mb-4">
                <span class="text-sm {{ $product->isInStock() ? 'text-green-600' : 'text-red-600' }} font-medium">
                    {{ $product->isInStock() ? '✓ In Stock (' . $product->stock_quantity . ' available)' : '✗ Out of Stock' }}
                </span>
                <span class="text-sm text-gray-500">Condition: <span class="font-medium capitalize">{{ $product->condition }}</span></span>
            </div>

            {{-- Part Numbers --}}
            @if($product->part_number || $product->oem_number)
            <div class="bg-gray-50 rounded-lg p-3 mb-4 text-sm">
                @if($product->part_number)<p>Part Number: <span class="font-mono font-medium">{{ $product->part_number }}</span></p>@endif
                @if($product->oem_number)<p>OEM Number: <span class="font-mono font-medium">{{ $product->oem_number }}</span></p>@endif
            </div>
            @endif

            {{-- Car Compatibility --}}
            @if($product->carYears->count() > 0)
            <div class="mb-4">
                <h3 class="text-sm font-semibold text-gray-700 mb-2">Compatible Vehicles:</h3>
                <div class="flex flex-wrap gap-1">
                    @foreach($product->carYears->take(10) as $carYear)
                        <span class="bg-blue-50 text-blue-700 text-xs px-2 py-1 rounded">
                            {{ $carYear->model->make->name }} {{ $carYear->model->name }} {{ $carYear->year }}
                        </span>
                    @endforeach
                    @if($product->carYears->count() > 10)
                        <span class="text-xs text-gray-500">+{{ $product->carYears->count() - 10 }} more</span>
                    @endif
                </div>
            </div>
            @endif

            {{-- Add to Cart --}}
            @if($product->isInStock())
            <form action="{{ route('cart.add') }}" method="POST" class="flex gap-3 mb-4">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <input type="number" name="quantity" value="1" min="1" max="{{ $product->stock_quantity }}"
                    class="w-20 border border-gray-300 rounded-lg px-3 py-2 text-center">
                <button type="submit" class="flex-1 bg-red-600 text-white py-3 rounded-lg hover:bg-red-700 font-semibold">
                    Add to Cart
                </button>
            </form>
            @endif

            {{-- Vendor --}}
            <div class="border-t pt-4">
                <p class="text-sm text-gray-500">Sold by:
                    <a href="{{ route('shop.vendor', $product->vendor->slug) }}" class="text-red-600 font-medium hover:text-red-800">
                        {{ $product->vendor->shop_name }}
                    </a>
                </p>
            </div>
        </div>
    </div>

    {{-- Tabs: Description, Specs, Reviews --}}
    <div class="bg-white rounded-xl shadow-sm mb-12">
        <div class="border-b flex">
            <button onclick="showTab('description')" id="tab-description" class="px-6 py-4 text-sm font-medium border-b-2 border-red-600 text-red-600">Description</button>
            <button onclick="showTab('reviews')" id="tab-reviews" class="px-6 py-4 text-sm font-medium text-gray-500 hover:text-red-600">Reviews ({{ $product->reviews->where('is_approved', true)->count() }})</button>
        </div>

        <div id="content-description" class="p-6">
            <div class="prose max-w-none text-gray-700">
                {!! nl2br(e($product->description ?? $product->short_description ?? 'No description available.')) !!}
            </div>
        </div>

        <div id="content-reviews" class="p-6 hidden">
            @foreach($product->reviews->where('is_approved', true) as $review)
            <div class="border-b pb-4 mb-4 last:border-0">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center text-red-600 font-bold text-sm">
                        {{ strtoupper(substr($review->user->name, 0, 1)) }}
                    </div>
                    <div>
                        <p class="font-medium text-sm">{{ $review->user->name }}</p>
                        <div class="flex">
                            @for($i = 1; $i <= 5; $i++)
                                <svg class="w-3 h-3 {{ $i <= $review->rating ? 'text-yellow-400' : 'text-gray-300' }}" fill="currentColor" viewBox="0 0 20 20"><path 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"/></svg>
                            @endfor
                        </div>
                    </div>
                    <span class="text-xs text-gray-400 ml-auto">{{ $review->created_at->diffForHumans() }}</span>
                </div>
                @if($review->title)<p class="font-medium text-sm mb-1">{{ $review->title }}</p>@endif
                <p class="text-sm text-gray-600">{{ $review->body }}</p>
            </div>
            @endforeach

            @if($canReview)
            <div class="mt-6 border-t pt-6">
                <h3 class="font-semibold mb-4">Write a Review</h3>
                <form action="{{ route('reviews.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <div class="mb-3">
                        <label class="block text-sm font-medium mb-1">Rating</label>
                        <select name="rating" class="border border-gray-300 rounded px-3 py-2">
                            @for($i = 5; $i >= 1; $i--)
                                <option value="{{ $i }}">{{ $i }} Star{{ $i > 1 ? 's' : '' }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="mb-3">
                        <input type="text" name="title" placeholder="Review title" class="w-full border border-gray-300 rounded px-3 py-2 text-sm">
                    </div>
                    <div class="mb-3">
                        <textarea name="body" rows="3" placeholder="Your review..." class="w-full border border-gray-300 rounded px-3 py-2 text-sm"></textarea>
                    </div>
                    <button type="submit" class="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 text-sm">Submit Review</button>
                </form>
            </div>
            @endif
        </div>
    </div>

    {{-- Related Products --}}
    @if($relatedProducts->count() > 0)
    <div>
        <h2 class="text-xl font-bold text-gray-800 mb-4">Related Products</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            @foreach($relatedProducts as $product)
                @include('components.product-card', ['product' => $product])
            @endforeach
        </div>
    </div>
    @endif
</div>

@push('scripts')
<script>
function showTab(tab) {
    ['description', 'reviews'].forEach(t => {
        document.getElementById('content-' + t).classList.add('hidden');
        document.getElementById('tab-' + t).classList.remove('border-b-2', 'border-red-600', 'text-red-600');
        document.getElementById('tab-' + t).classList.add('text-gray-500');
    });
    document.getElementById('content-' + tab).classList.remove('hidden');
    document.getElementById('tab-' + tab).classList.add('border-b-2', 'border-red-600', 'text-red-600');
    document.getElementById('tab-' + tab).classList.remove('text-gray-500');
}
</script>
@endpush
@endsection