@extends('layouts.app')
@section('title', $product->name . ' | Shopora')
@section('content')
<div class="bg-gray-100 py-4">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center gap-2 text-xs text-gray-500 mb-4">
            <a href="{{ route('home') }}" class="hover:text-primary transition">Home</a>
            <i class="fa-solid fa-chevron-right text-[10px]"></i>
            <a href="{{ route('products.index') }}" class="hover:text-primary transition">Products</a>
            <i class="fa-solid fa-chevron-right text-[10px]"></i>
            <span class="text-gray-800">{{ $product->name }}</span>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-12 gap-0">
                {{-- Product Image --}}
                <div class="md:col-span-4 p-4 border-b md:border-b-0 md:border-r border-gray-100" x-data="{ activeImage: 0 }">
                    <div class="aspect-square bg-gray-50 border border-gray-100 flex items-center justify-center mb-3 overflow-hidden">
                        @if($product->images && is_array($product->images) && count($product->images) > 0)
                            <img src="{{ asset('storage/' . $product->images[0]) }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
                        @else
                            <span class="text-[10rem] opacity-70">🛍️</span>
                        @endif
                    </div>
                    <div class="flex gap-2">
                        @if($product->images && is_array($product->images))
                            @foreach($product->images as $img)
                            <div class="w-16 h-16 bg-gray-50 border-2 border-primary flex items-center justify-center cursor-pointer overflow-hidden">
                                <img src="{{ asset('storage/' . $img) }}" class="w-full h-full object-cover">
                            </div>
                            @endforeach
                        @else
                            <div class="w-16 h-16 bg-gray-50 border-2 border-primary flex items-center justify-center cursor-pointer">
                                <span class="text-2xl">🛍️</span>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Product Info --}}
                <div class="md:col-span-5 p-6" x-data="{ qty: 1 }">
                    <h1 class="text-xl md:text-2xl font-medium text-gray-800 mb-3 leading-tight">{{ $product->name }}</h1>
                    
                    <div class="flex items-center gap-4 mb-4 border-b border-gray-100 pb-4">
                        <div class="flex items-center text-xs">
                            @for($i=1;$i<=5;$i++)
                            <i class="fa-solid fa-star {{ $i<=round($product->rating)?'text-[#faca51]':'text-gray-300' }}"></i>
                            @endfor
                            <a href="#reviews" class="text-blue-600 hover:underline ml-2">{{ $product->rating }} Ratings</a>
                        </div>
                        @if($product->brand)<span class="text-xs text-gray-400">|</span><span class="text-xs text-gray-500">Brand: <a href="#" class="text-blue-600 hover:underline">{{ $product->brand }}</a></span>@endif
                    </div>

                    <div class="mb-6">
                        <div class="flex items-end gap-3 mb-1">
                            <span class="text-3xl font-bold text-primary">Rs. {{ number_format($product->current_price) }}</span>
                        </div>
                        @if($product->is_on_sale)
                        <div class="flex items-center gap-2 text-sm">
                            <span class="text-gray-400 line-through">Rs. {{ number_format($product->price) }}</span>
                            <span class="text-gray-800 font-medium">-{{ $product->discount_percent }}%</span>
                        </div>
                        @endif
                    </div>

                    @if($product->is_in_stock)
                    <form action="{{ route('cart.add') }}" method="POST" class="mt-8">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        
                        <div class="flex items-center gap-4 mb-6">
                            <span class="text-sm text-gray-500 w-16">Quantity</span>
                            <div class="flex items-center">
                                <button type="button" @click="qty=Math.max(1,qty-1)" class="w-8 h-8 flex items-center justify-center bg-gray-100 text-gray-500 hover:bg-gray-200"><i class="fa-solid fa-minus text-xs"></i></button>
                                <input type="number" name="quantity" :value="qty" min="1" max="{{ $product->stock }}" class="w-12 h-8 text-center text-sm border-y border-gray-100 focus:outline-none" readonly>
                                <button type="button" @click="qty=Math.min({{ $product->stock }},qty+1)" class="w-8 h-8 flex items-center justify-center bg-gray-100 text-gray-500 hover:bg-gray-200"><i class="fa-solid fa-plus text-xs"></i></button>
                            </div>
                            <span class="text-xs text-gray-400">{{ $product->is_low_stock ? "Only {$product->stock} items left" : '' }}</span>
                        </div>

                        <div class="flex gap-2">
                            <button type="submit" class="flex-1 bg-[#2abbe8] hover:bg-[#209cbd] text-white font-medium py-3 text-sm rounded shadow-sm">Buy Now</button>
                            <button type="submit" class="flex-1 btn-primary text-white font-medium py-3 text-sm rounded shadow-sm">Add to Cart</button>
                        </div>
                    </form>
                    @else
                    <div class="p-4 bg-gray-100 text-center text-gray-500 font-medium mb-6">
                        This item is currently out of stock
                    </div>
                    <button disabled class="w-full bg-gray-300 text-white font-medium py-3 text-sm rounded cursor-not-allowed">Add to Cart</button>
                    @endif
                </div>

                {{-- Delivery Options --}}
                <div class="md:col-span-3 bg-gray-50 p-4 border-l border-gray-100 text-sm">
                    <p class="text-gray-500 text-xs font-semibold mb-3">Delivery</p>
                    <div class="flex gap-3 mb-4">
                        <i class="fa-solid fa-location-dot text-gray-400 text-lg"></i>
                        <div>
                            <p class="text-gray-800">Sindh, Karachi - Gulshan-e-Iqbal</p>
                            <a href="#" class="text-blue-600 text-xs hover:underline uppercase font-medium">Change</a>
                        </div>
                    </div>
                    <div class="flex gap-3 pb-4 border-b border-gray-200 mb-4">
                        <i class="fa-solid fa-truck text-gray-400 text-lg"></i>
                        <div>
                            <p class="text-gray-800 font-medium">Standard Delivery</p>
                            <p class="text-gray-500 text-xs">2 - 4 days</p>
                        </div>
                        <p class="ml-auto font-medium text-gray-800">Rs. 299</p>
                    </div>

                    <p class="text-gray-500 text-xs font-semibold mb-3">Service</p>
                    <div class="flex items-start gap-3 mb-3">
                        <i class="fa-solid fa-rotate-left text-gray-400 text-lg mt-0.5"></i>
                        <div>
                            <p class="text-gray-800">14 days free & easy return</p>
                            <p class="text-gray-500 text-xs">Change of mind is not applicable</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <i class="fa-solid fa-shield-halved text-gray-400 text-lg mt-0.5"></i>
                        <div>
                            <p class="text-gray-800">Warranty not available</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Details & Reviews --}}
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <div class="lg:col-span-9 space-y-6">
                {{-- Description --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-lg font-medium text-gray-800 mb-4 pb-2 border-b border-gray-100">Product details of {{ $product->name }}</h2>
                    <div class="text-gray-600 text-sm leading-relaxed prose max-w-none">
                        {!! nl2br(e($product->description)) !!}
                    </div>
                </div>

                {{-- Reviews --}}
                <div id="reviews" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-lg font-medium text-gray-800 mb-6 pb-2 border-b border-gray-100">Ratings & Reviews</h2>
                    
                    <div class="flex flex-col md:flex-row gap-8 mb-8 pb-8 border-b border-gray-100">
                        <div class="text-center md:text-left">
                            <div class="flex items-end justify-center md:justify-start gap-2 mb-1">
                                <span class="text-5xl font-medium text-gray-800">{{ $product->rating }}</span>
                                <span class="text-2xl text-gray-400 mb-1">/5</span>
                            </div>
                            <div class="flex text-2xl justify-center md:justify-start mb-2">
                                @for($i=1;$i<=5;$i++)<i class="fa-solid fa-star {{ $i<=round($product->rating)?'text-[#faca51]':'text-gray-300' }}"></i>@endfor
                            </div>
                            <p class="text-sm text-gray-500">{{ $product->reviews_count }} Ratings</p>
                        </div>
                    </div>

                    @auth
                    @if(!$alreadyReviewed)
                    <div class="mb-8 p-4 bg-gray-50 border border-gray-100 rounded">
                        <h4 class="font-medium text-gray-800 mb-3 text-sm">Write a Review</h4>
                        <form action="{{ route('reviews.store', $product) }}" method="POST">
                            @csrf
                            <div x-data="{ star: 0 }" class="mb-3">
                                <div class="flex gap-1 text-xl cursor-pointer">
                                    @for($i=1;$i<=5;$i++)
                                    <i @click="star={{ $i }}" class="fa-solid fa-star" :class="star>={{ $i }}?'text-[#faca51]':'text-gray-300'"></i>
                                    @endfor
                                </div>
                                <input type="hidden" name="rating" :value="star">
                            </div>
                            <input type="text" name="title" placeholder="Brief summary of your review" class="w-full border border-gray-300 rounded px-3 py-2 text-sm mb-3 focus:outline-none focus:border-primary">
                            <textarea name="body" rows="3" placeholder="What did you like or dislike?" class="w-full border border-gray-300 rounded px-3 py-2 text-sm mb-3 focus:outline-none focus:border-primary resize-none"></textarea>
                            <button type="submit" class="btn-primary px-6 py-2 rounded text-sm font-medium shadow-sm">Submit Review</button>
                        </form>
                    </div>
                    @endif
                    @endauth

                    <div class="space-y-6">
                        @forelse($product->approvedReviews as $review)
                        <div class="border-b border-gray-100 pb-6 last:border-0 last:pb-0">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex text-sm">
                                    @for($i=1;$i<=5;$i++)<i class="fa-solid fa-star {{ $i<=$review->rating?'text-[#faca51]':'text-gray-300' }}"></i>@endfor
                                </div>
                                <span class="text-xs text-gray-400">{{ $review->created_at->diffForHumans() }}</span>
                            </div>
                            <p class="text-xs text-gray-500 mb-2">by {{ $review->user->name }} <i class="fa-solid fa-circle-check text-green-500 ml-1"></i> Verified Purchase</p>
                            @if($review->title)<p class="font-medium text-gray-800 text-sm mb-1">{{ $review->title }}</p>@endif
                            @if($review->body)<p class="text-sm text-gray-600">{{ $review->body }}</p>@endif
                        </div>
                        @empty
                        <div class="text-center text-gray-500 py-4 text-sm">No reviews yet.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Recommendations --}}
            <div class="lg:col-span-3">
                <h3 class="font-medium text-gray-800 mb-4">Just For You</h3>
                <div class="grid grid-cols-1 gap-3">
                    @foreach($related->take(4) as $rel)
                    @include('partials.product-card',['product'=>$rel])
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
