@extends('layouts.app')

@section('content')
<div class="bg-gray-50 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Breadcrumb -->
        <nav class="flex mb-8" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ route('home') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
                        Home
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 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"></path></svg>
                        <a href="{{ route('products.index') }}" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2">Products</a>
                    </div>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                         <svg class="w-6 h-6 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"></path></svg>
                        <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">{{ $product->name }}</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="bg-white shadow-xl overflow-hidden mb-12">
            <!-- Top Section: Image and Basic Info -->
            <div class="md:flex">
                <!-- Product Image -->
                <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-8 border-r border-gray-200">
                     @if($product->image)
                        <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="max-h-[500px] w-auto object-contain rounded shadow-sm">
                    @else
                         <div class="h-96 w-full flex items-center justify-center text-gray-400 bg-gray-200">
                            No Image Available
                        </div>
                    @endif
                </div>

                <!-- Product Header Details -->
                <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                    <div class="mb-6">
                        @foreach($product->categories as $category)
                            <span class="inline-block bg-blue-100 text-blue-800 text-xs font-semibold  tracking-wide px-3 py-1 rounded-full mb-2 mr-2">
                                {{ $category->name }}
                            </span>
                        @endforeach
                    </div>

                    <h1 class="text-2xl font-bold text-gray-900 mb-4 capitalize">{{ $product->name }}</h1>
                    
                    <div class="flex items-center mb-8">
                        <span class="text-xl font-bold text-blue-600 mr-4 capitalize">PKR {{ $product->price }}</span>
                         @if($product->status === 'active')
                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 capitalize">
                                In Stock
                            </span>
                        @elseif($product->status === 'out_of_stock')
                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 capitalize">
                                Out of Stock
                            </span>
                        @else
                             <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 capitalize">
                                Unavailable
                            </span>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Description Section (Full Width Below Image) -->
            <div class="p-8 md:p-12 border-t border-gray-100 bg-gray-50">
                 <h3 class="text-xl font-bold text-gray-900 capitalize mb-4 border-b pb-2 inline-block border-blue-600">Product Description</h3>
                 <div class="prose prose-blue max-w-none text-gray-700 leading-relaxed text-lg trix-content">
                    {!! $product->description !!}
                 </div>
            </div>

            <!-- Interested / Call to Action (Full Width Row) -->
            <div class="bg-blue-900 text-white p-8 md:p-12 text-center md:text-left flex flex-col md:flex-row items-center justify-between">
                <div>
                     <h3 class="text-2xl font-bold uppercase mb-2">Interested in this product?</h3>
                     <p class="text-blue-200">Contact us today for bulk orders and detailed specifications.</p>
                </div>
                <div class="mt-6 md:mt-0">
                    <a href="{{ route('contact') }}" class="inline-block bg-white text-blue-900 text-center font-bold py-3 px-8 rounded-md uppercase tracking-wider hover:bg-gray-100 transition duration-300 shadow-lg">
                        Contact Us Now
                    </a>
                </div>
            </div>
        </div>

        <!-- Related Products -->
        @if($relatedProducts->count() > 0)
            <div class="mt-16">
                <h2 class="text-2xl font-bold text-gray-900 uppercase tracking-wide mb-8 border-b pb-4">Related Products</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($relatedProducts as $related)
                         <div class="bg-white border border-gray-100 hover:shadow-lg transition-shadow duration-300">
                             <a href="{{ route('products.show', $related) }}" class="block">
                                <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden bg-gray-200">
                                     @if($related->image)
                                        <img src="{{ asset('storage/' . $related->image) }}" alt="{{ $related->name }}" class="w-full h-40 object-cover object-center group-hover:opacity-75">
                                    @else
                                        <div class="w-full h-40 flex items-center justify-center bg-gray-100 text-gray-400">
                                            No Image
                                        </div>
                                    @endif
                                </div>
                                <div class="p-4">
                                    <h3 class="text-md font-bold text-gray-900 hover:text-blue-600 truncate">{{ $related->name }}</h3>
                                    <div class="mt-2 flex justify-between items-center">
                                        <span class="text-blue-600 font-bold">${{ $related->price }}</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection