@extends('layouts.app')
@section('title', $product->name . ' - AutoPart')

@section('content')
@php
    $imgSrc = $product->image_path ? asset('images/' . $product->image_path) : 'https://ui-avatars.com/api/?name=' . urlencode($product->name) . '&background=random&size=400';
    $discount = ($product->old_price && $product->old_price > $product->price) ? round((1 - $product->price / $product->old_price) * 100) : 0;
    $thumbImg = asset('images/341fbb0976be66c1c36fd01a5b73ab10.jpg');
@endphp

<div class="bg-gray-50 min-h-screen pb-16">
    {{-- Page Header --}}
    <div class="bg-brand-dark text-white py-12 mb-8">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-extrabold uppercase tracking-widest mb-4">Product Details</h1>
            <div class="flex items-center justify-center space-x-2 text-sm text-gray-400">
                <a href="{{ url('/') }}" class="hover:text-brand-red transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <a href="{{ url('/shop') }}" class="hover:text-brand-red transition-colors">Shop</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-white">{{ mb_strimwidth($product->name, 0, 30, '...') }}</span>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 lg:p-12 mb-12">
            <div class="flex flex-col lg:flex-row gap-12">
                {{-- Gallery --}}
                <div class="lg:w-1/2 flex flex-col space-y-4">
                    <div class="aspect-square bg-white flex items-center justify-center rounded-lg border border-gray-100 p-8 relative overflow-hidden group">
                        @if($discount > 0)
                        <span class="absolute top-4 left-4 z-10 bg-brand-red text-white text-xs font-bold px-3 py-1 rounded">-{{ $discount }}%</span>
                        @endif
                        <img src="{{ $imgSrc }}" alt="{{ $product->name }}" class="w-full h-full object-contain mix-blend-multiply group-hover:scale-110 transition-transform duration-500 cursor-zoom-in">
                    </div>
                    <div class="grid grid-cols-4 gap-4">
                        @foreach([$imgSrc, $thumbImg, $imgSrc, $thumbImg] as $idx => $img)
                        <div class="aspect-square bg-white rounded border-2 p-2 cursor-pointer transition-colors {{ $idx === 0 ? 'border-brand-red' : 'border-gray-100 hover:border-gray-300' }}">
                            <img src="{{ $img }}" alt="" class="w-full h-full object-contain mix-blend-multiply">
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Info --}}
                <div class="lg:w-1/2 flex flex-col justify-center">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="text-brand-red font-bold text-sm tracking-widest uppercase">{{ $product->brand }}</span>
                        <span class="text-gray-300">|</span>
                        <span class="text-xs text-green-600 font-bold bg-green-50 px-2 py-0.5 rounded flex items-center"><i data-lucide="check-circle" class="w-3 h-3 mr-1"></i> {{ $product->stock > 0 ? 'In Stock' : 'Out of Stock' }}</span>
                    </div>
                    <h2 class="text-3xl font-extrabold text-brand-dark mb-4">{{ $product->name }}</h2>

                    {{-- Rating --}}
                    <div class="flex items-center space-x-4 mb-6">
                        <div class="flex text-yellow-400">
                            @for($i = 0; $i < 5; $i++)
                                @if($i < floor($product->rating))
                                    <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                @else
                                    <svg class="w-4 h-4 text-gray-300 fill-current" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                @endif
                            @endfor
                        </div>
                        <span class="text-sm text-gray-500">({{ $product->num_reviews ?? 0 }} Customer Reviews)</span>
                    </div>

                    {{-- Price --}}
                    <div class="flex items-end space-x-3 mb-6">
                        <span class="text-4xl font-extrabold text-brand-dark">${{ number_format($product->price, 2) }}</span>
                        @if($product->old_price)
                        <span class="text-lg text-gray-400 line-through mb-1">${{ number_format($product->old_price, 2) }}</span>
                        @endif
                    </div>

                    <p class="text-gray-600 mb-8 leading-relaxed">
                        {{ $product->description ?? 'Provide optimal protection and performance with our premium ' . $product->name . '. Engineered for high performance and longevity.' }}
                    </p>

                    {{-- Add to Cart --}}
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mb-8 pb-8 border-b border-gray-100">
                        <div class="flex border border-gray-200 rounded h-12 w-32">
                            <button onclick="const i=document.getElementById('qty'); i.value=Math.max(1,parseInt(i.value)-1)" class="w-10 hover:bg-gray-100 transition-colors text-gray-600 font-bold">-</button>
                            <input type="number" id="qty" value="1" readonly class="flex-1 text-center font-bold text-brand-dark border-x border-gray-200 outline-none m-0 p-0">
                            <button onclick="const i=document.getElementById('qty'); i.value=parseInt(i.value)+1" class="w-10 hover:bg-gray-100 transition-colors text-gray-600 font-bold">+</button>
                        </div>
                        <button
                            onclick="const q=parseInt(document.getElementById('qty').value); for(let i=0;i<q;i++){CartManager.addItem({id:{{ $product->id }}, name:'{{ addslashes($product->name) }}', price:{{ $product->price }}, brand:'{{ addslashes($product->brand) }}', image:'{{ $imgSrc }}'})}"
                            class="flex-1 bg-brand-red text-white h-12 rounded font-bold uppercase tracking-widest hover:bg-red-700 transition-colors flex items-center justify-center space-x-2">
                            <i data-lucide="shopping-cart" class="w-5 h-5"></i>
                            <span>Add to Cart</span>
                        </button>
                        <button onclick="WishlistManager.toggle({{ $product->id }})" class="w-12 h-12 rounded border border-gray-200 flex items-center justify-center text-gray-500 hover:border-brand-red hover:text-brand-red transition-colors">
                            <i data-lucide="heart" class="w-5 h-5"></i>
                        </button>
                    </div>

                    {{-- Meta --}}
                    <div class="space-y-3 text-sm text-gray-600">
                        <div class="flex items-center"><span class="font-bold w-24 text-gray-800">SKU:</span> <span>SKU-{{ $product->id }}</span></div>
                        <div class="flex items-center"><span class="font-bold w-24 text-gray-800">Category:</span> <a href="{{ url('/shop?category=' . urlencode($product->category)) }}" class="text-brand-red hover:underline">{{ $product->category }}</a></div>
                        <div class="flex items-center"><span class="font-bold w-24 text-gray-800">Brand:</span> <span>{{ $product->brand }}</span></div>
                    </div>

                    {{-- Guarantees --}}
                    <div class="mt-8 bg-gray-50 p-4 rounded-lg flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 text-sm">
                        <div class="flex items-center space-x-3 text-gray-700">
                            <i data-lucide="truck" class="w-6 h-6 text-brand-red"></i>
                            <div><span class="block font-bold">Fast Delivery</span><span class="text-xs text-gray-500">2-4 Business Days</span></div>
                        </div>
                        <div class="flex items-center space-x-3 text-gray-700">
                            <i data-lucide="shield-check" class="w-6 h-6 text-brand-red"></i>
                            <div><span class="block font-bold">Secure Payment</span><span class="text-xs text-gray-500">100% Protected</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tabs --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-100" x-data="{ tab: 'description' }">
            <div class="flex border-b border-gray-100 overflow-x-auto scbar">
                @foreach(['description', 'specifications', 'reviews'] as $tab)
                <button onclick="document.querySelectorAll('.tab-content').forEach(e=>e.classList.add('hidden')); document.getElementById('tab-{{ $tab }}').classList.remove('hidden'); document.querySelectorAll('.tab-btn').forEach(e=>{e.classList.remove('text-brand-red'); e.classList.add('text-gray-500')}); this.classList.add('text-brand-red'); this.classList.remove('text-gray-500')"
                    class="tab-btn flex-1 py-4 text-center font-bold uppercase tracking-widest text-sm transition-colors relative whitespace-nowrap px-6 {{ $tab === 'description' ? 'text-brand-red' : 'text-gray-500 hover:text-gray-800' }}">
                    {{ $tab }}
                </button>
                @endforeach
            </div>
            <div class="p-8">
                <div id="tab-description" class="tab-content text-gray-600 leading-relaxed text-sm">
                    <h3 class="font-bold text-gray-800 text-lg mb-4">Product Overview</h3>
                    <p class="mb-4">{{ $product->description ?? 'Provide optimal protection and performance with our premium ' . $product->name . '.' }} Designed to meet or exceed OEM specifications, this product guarantees perfect fitment and function.</p>
                    <h4 class="font-bold text-gray-800 mb-2">Key Features</h4>
                    <ul class="list-disc pl-5 space-y-1 text-gray-600">
                        <li>Advanced friction reduction for improved efficiency</li>
                        <li>Excellent performance under stress</li>
                        <li>Protects against sludge and deposits</li>
                        <li>Compatible with modern vehicle systems</li>
                        <li>Extended lifespan guarantee</li>
                    </ul>
                </div>
                <div id="tab-specifications" class="tab-content hidden text-sm">
                    <table class="w-full text-left border-collapse">
                        <tbody>
                            @foreach([['Brand', $product->brand], ['SKU', 'SKU-'.$product->id], ['Weight', '4.5 lbs'], ['Dimensions', '12 x 8 x 6 in'], ['Warranty', '2 Years Limited'], ['Material', 'OEM Grade']] as $row)
                            <tr class="border-b border-gray-50 last:border-0 hover:bg-gray-50">
                                <th class="py-3 px-4 text-gray-800 w-1/4 font-semibold">{{ $row[0] }}</th>
                                <td class="py-3 px-4 text-gray-600">{{ $row[1] }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div id="tab-reviews" class="tab-content hidden text-sm">
                    <div class="flex flex-col md:flex-row gap-8 mb-8 border-b border-gray-100 pb-8">
                        <div class="md:w-1/3 text-center">
                            <span class="text-5xl font-extrabold text-brand-dark">{{ number_format($product->rating, 1) }}</span>
                            <span class="text-gray-500 block mb-2">out of 5</span>
                            <span class="text-gray-500">Based on {{ $product->num_reviews ?? 0 }} reviews</span>
                        </div>
                    </div>
                    <div class="space-y-6">
                        <div class="flex space-x-4">
                            <div class="w-12 h-12 rounded-full bg-brand-red text-white flex items-center justify-center font-bold text-lg shrink-0">JS</div>
                            <div>
                                <div class="flex items-center space-x-2 mb-1">
                                    <span class="font-bold text-brand-dark">John Smith</span>
                                    <span class="text-gray-300">|</span>
                                    <span class="text-gray-500 text-xs">Verified Purchase</span>
                                </div>
                                <div class="flex text-yellow-400 mb-2">★★★★★</div>
                                <h4 class="font-bold text-gray-800 mb-1">Excellent Product!</h4>
                                <p class="text-gray-600">Really happy with this purchase. My engine runs noticeably smoother. Shipping was incredibly fast. Highly recommended.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Related Products --}}
        @if($relatedProducts->count() > 0)
        <div class="mt-12">
            <h2 class="text-2xl font-extrabold text-brand-dark uppercase tracking-wider relative mb-8 pb-4 border-b border-gray-200">
                Related <span class="text-brand-red">Products</span>
                <span class="absolute -bottom-[2px] left-0 w-16 h-1 bg-brand-red"></span>
            </h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($relatedProducts as $rp)
                    @include('partials.product-card', ['product' => $rp])
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>
@endsection