@extends('default.layouts.app')

@section('title', isset($product) ? $product->name . ' | Ralph Lauren' : 'Products - Ralph Lauren')

@section('content')
@if(isset($product))
    <!-- Accessibility: Skip Link -->
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-white z-50 px-4 py-2 border border-black shadow-lg">Skip to main content</a>

    <!-- Main Content -->
    <main id="main-content" class="max-w-[1690px] mx-auto pt-28 lg:pt-44 px-0 lg:px-8 pb-16">
        <div class="lg:grid lg:grid-cols-12 lg:gap-12 xl:gap-20">

            <!-- Left Column: Image Gallery -->
            <div class="lg:col-span-7 xl:col-span-8 mb-8 lg:mb-0 relative">
                <div class="flex flex-col-reverse lg:flex-row gap-4 h-full sticky top-32">

                    <!-- Desktop Thumbnails -->
                    <div class="hidden lg:flex flex-col gap-4 w-20 xl:w-24 overflow-y-auto max-h-[80vh] no-scrollbar py-1">
                        @foreach($product->images as $index => $image)
                            <button aria-label="View image {{ $index + 1 }}" class="thumbnail-btn w-full aspect-[4/5] bg-rl-gray relative group {{ $index == 0 ? 'ring-2 ring-gray-900' : 'hover:ring-1 hover:ring-gray-400' }} overflow-hidden focus:outline-none focus:ring-4" onclick="changeImage({{ $index }})">
                                <img src="{{ $image }}" width="100" height="125" alt="Thumbnail view {{ $index + 1 }}" class="w-full h-full object-cover mix-blend-multiply" {{ $index > 0 ? 'loading="lazy"' : '' }} />
                            </button>
                        @endforeach
                    </div>

                    <!-- Main Image Display -->
                    <div class="flex-1 relative bg-rl-gray group">
                        <!-- Desktop Main Image -->
                        <div class="hidden lg:block w-full aspect-[4/5] relative overflow-hidden cursor-zoom-in">
                            <img id="main-image" src="{{ $product->images[0] ?? '' }}" width="800" height="1000" alt="{{ $product->name }} - Main View" class="w-full h-full object-cover mix-blend-multiply transition-transform duration-500 transform origin-center group-hover:scale-125" />
                        </div>

                        <!-- Mobile Horizontal Scroll Gallery (Snap) -->
                        <div class="lg:hidden w-full aspect-[4/5] flex overflow-x-auto snap-x snap-mandatory no-scrollbar" id="mobile-gallery">
                            @foreach($product->images as $index => $image)
                                <div class="snap-center min-w-full h-full relative">
                                    <img src="{{ $image }}" width="600" height="750" alt="View {{ $index + 1 }}" class="w-full h-full object-cover mix-blend-multiply" {{ $index > 0 ? 'loading="lazy"' : '' }}>
                                </div>
                            @endforeach
                        </div>

                        <!-- Mobile Indicators -->
                        <div class="lg:hidden absolute bottom-4 left-0 right-0 flex justify-center gap-2 pointer-events-none">
                            @foreach($product->images as $index => $image)
                                <span class="w-2 h-2 rounded-full opacity-75 shadow-sm {{ $index == 0 ? 'bg-gray-800' : 'bg-gray-400' }}"></span>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Product Details -->
            <div class="lg:col-span-5 xl:col-span-4 px-4 lg:px-0">
                <div class="lg:sticky lg:top-32">
                    <div class="flex flex-col h-full pt-4 lg:pt-0">

                        <!-- Breadcrumbs -->
                        <nav aria-label="Breadcrumb" class="text-[10px] uppercase tracking-widest text-gray-500 mb-6 hidden lg:block">
                            <ol class="flex items-center">
                                <li><a href="#" class="hover:text-gray-900 transition-colors">Men</a><span class="mx-2 text-gray-400">/</span></li>
                                <li><a href="#" class="hover:text-gray-900 transition-colors">{{ $product->category->name }}</a><span class="mx-2 text-gray-400">/</span></li>
                                <li aria-current="page" class="text-gray-900 font-medium">{{ $product->name }}</li>
                            </ol>
                        </nav>

                        <!-- Product Title & Price -->
                        <div class="border-b border-gray-200 pb-6 mb-6">
                            <div class="flex justify-between items-start mb-2">
                                <h1 class="font-serif text-2xl lg:text-3xl text-gray-900 leading-tight">
                                    {{ $product->name }}
                                </h1>
                                <button aria-label="Add to Wishlist" class="text-gray-400 hover:text-red-600 transition-colors p-2 -mr-2 rounded-full hover:bg-gray-100">
                                    <i class="far fa-heart text-xl"></i>
                                </button>
                            </div>

                            <div class="flex items-baseline gap-4 mb-4">
                                <span class="text-lg font-medium text-gray-900">${{ number_format($product->price, 2) }}</span>
                                @if($product->is_new)
                                    <span class="text-xs text-gray-600 uppercase tracking-wide bg-gray-100 px-2 py-1 rounded font-semibold">New Arrival</span>
                                @endif
                            </div>

                            <!-- Star Rating -->
                            <div class="flex items-center text-xs gap-2 cursor-pointer group w-fit">
                                <div class="flex text-gray-900 space-x-0.5" aria-label="Rated {{ $product->rating }} out of 5 stars" role="img">
                                    @for($i = 1; $i <= 5; $i++)
                                        @if($i <= floor($product->rating))
                                            <i class="fas fa-star text-[10px]"></i>
                                        @elseif($i - 0.5 <= $product->rating)
                                            <i class="fas fa-star-half-alt text-[10px]"></i>
                                        @else
                                            <i class="far fa-star text-[10px]"></i>
                                        @endif
                                    @endfor
                                </div>
                                <a href="#reviews" class="text-gray-500 underline group-hover:text-gray-900 focus:text-gray-900 focus:outline-none focus:ring-2 rounded-sm px-1">({{ $product->reviews_count }} Reviews)</a>
                            </div>
                        </div>

                        <!-- Color Selector -->
                        @if($product->colors && count($product->colors) > 0)
                        <fieldset class="mb-8 border-0 p-0 m-0">
                            <legend class="flex justify-between text-xs uppercase tracking-wider font-medium mb-3 w-full">
                                <span class="text-gray-600">Color: <span class="text-gray-900 ml-1 font-bold" id="color-name">{{ $product->colors[0]['name'] ?? '' }}</span></span>
                            </legend>
                            <div class="flex flex-wrap gap-3">
                                @foreach($product->colors as $index => $color)
                                    <label class="cursor-pointer group relative">
                                        <input type="radio" name="color" value="{{ $color['name'] }}" class="peer sr-only" {{ $index == 0 ? 'checked' : '' }} onchange="updateColor('{{ $color['name'] }}')">
                                        <span class="block w-10 h-10 rounded-full border border-gray-200 p-0.5 peer-checked:ring-1 peer-checked:ring-offset-2 peer-checked:ring-gray-900 {{ $index > 0 ? 'hover:border-gray-400' : '' }} peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2">
                                            <img src="{{ $color['swatch'] }}" width="40" height="40" alt="Select {{ $color['name'] }}" class="w-full h-full rounded-full object-cover" />
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        </fieldset>
                        @endif

                        <!-- Size Selector -->
                        @if($product->sizes && count($product->sizes) > 0)
                        <fieldset class="mb-8 border-0 p-0 m-0">
                            <legend class="flex justify-between text-xs uppercase tracking-wider font-medium mb-3 w-full">
                                <span class="text-gray-600">Size: <span class="text-gray-900 ml-1 font-bold" id="size-name">Select Size</span></span>
                                <button type="button" class="underline text-gray-500 hover:text-gray-900 focus:text-black focus:outline-none focus:ring-2 rounded-sm px-1">Size Chart</button>
                            </legend>
                            <div class="grid grid-cols-4 gap-3">
                                @foreach($product->sizes as $size)
                                    <label class="cursor-pointer relative">
                                        <input type="radio" name="size" value="{{ $size }}" class="peer sr-only" onchange="updateSize('{{ $size }}')">
                                        <span class="flex items-center justify-center py-3 text-xs font-medium border border-gray-200 uppercase bg-white text-gray-900 peer-checked:border-gray-900 peer-checked:bg-gray-900 peer-checked:text-white hover:border-gray-900 transition-all peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-inset">{{ $size }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </fieldset>
                        @endif

                        <!-- CTA Buttons -->
                        <div class="flex flex-col gap-3 mb-10">
                            <form action="{{ route('cart.add', $product->slug) }}" method="POST" class="w-full">
                                @csrf
                                <input type="hidden" name="quantity" value="1">
                                <button type="submit" class="w-full bg-rl-navy text-white py-4 px-8 text-xs font-bold tracking-[0.15em] uppercase hover:bg-black transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300 min-h-[48px]">
                                    Add to Bag
                                </button>
                            </form>
                            <a href="{{ route('store.locator') }}" class="w-full bg-white text-gray-900 border border-gray-300 py-4 px-8 text-xs font-bold tracking-[0.15em] uppercase hover:border-gray-900 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-gray-200 min-h-[48px] text-center block">
                                Find in Store
                            </a>
                        </div>

                        <!-- Info Banner -->
                        <div class="bg-gray-50 p-4 mb-8 flex items-start gap-3 rounded border border-gray-100">
                            <i class="fas fa-shipping-fast text-gray-600 mt-1" aria-hidden="true"></i>
                            <div>
                                <p class="text-xs font-bold uppercase mb-1">Free Fast Shipping</p>
                                <p class="text-xs text-gray-600">Sign in to your Ralph Lauren account for complimentary shipping on all orders.</p>
                            </div>
                        </div>

                        <!-- Accordions -->
                        <div class="mt-auto space-y-0">

                            <!-- Description -->
                            <div class="border-t border-gray-200">
                                <button class="accordion-btn w-full py-5 flex justify-between items-center text-left group focus:outline-none focus:bg-gray-50 px-1" aria-expanded="true" aria-controls="desc-content" onclick="toggleAccordion(this)">
                                    <span class="font-sans text-sm font-medium tracking-wide uppercase text-gray-900 group-hover:text-gray-600 transition-colors">Description</span>
                                    <i class="fas fa-chevron-down text-xs text-gray-500 transform transition-transform duration-300 rotate-180"></i>
                                </button>
                                <div id="desc-content" class="accordion-content max-h-96 opacity-100 overflow-hidden transition-all duration-300 ease-in-out">
                                    <div class="text-sm text-gray-600 leading-relaxed space-y-4 pb-6 px-1">
                                        {!! nl2br(e($product->description)) !!}
                                    </div>
                                </div>
                            </div>

                            <!-- Shipping -->
                            <div class="border-t border-gray-200">
                                <button class="accordion-btn w-full py-5 flex justify-between items-center text-left group focus:outline-none focus:bg-gray-50 px-1" aria-expanded="false" aria-controls="shipping-content" onclick="toggleAccordion(this)">
                                    <span class="font-sans text-sm font-medium tracking-wide uppercase text-gray-900 group-hover:text-gray-600 transition-colors">Shipping & Returns</span>
                                    <i class="fas fa-chevron-down text-xs text-gray-500 transform transition-transform duration-300"></i>
                                </button>
                                <div id="shipping-content" class="accordion-content max-h-0 opacity-0 overflow-hidden transition-all duration-300 ease-in-out">
                                    <div class="text-sm text-gray-600 leading-relaxed space-y-4 pb-6 px-1">
                                        <p>Enjoy free returns and exchanges within 30 days of the order shipment date. Items must be unwashed, unworn, and unaltered with the original tags.</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Gift Options -->
                            <div class="border-t border-gray-200">
                                <button class="accordion-btn w-full py-5 flex justify-between items-center text-left group focus:outline-none focus:bg-gray-50 px-1" aria-expanded="false" aria-controls="gift-content" onclick="toggleAccordion(this)">
                                    <span class="font-sans text-sm font-medium tracking-wide uppercase text-gray-900 group-hover:text-gray-600 transition-colors">Gift Options</span>
                                    <i class="fas fa-chevron-down text-xs text-gray-500 transform transition-transform duration-300"></i>
                                </button>
                                <div id="gift-content" class="accordion-content max-h-0 opacity-0 overflow-hidden transition-all duration-300 ease-in-out">
                                    <div class="text-sm text-gray-600 leading-relaxed space-y-4 pb-6 px-1">
                                        <p>Select the gift option at checkout to include a personalized message and our signature navy box.</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recommendations -->
        <section class="mt-24 px-4 lg:px-0" aria-labelledby="recommendations-heading">
            <h2 id="recommendations-heading" class="font-serif text-2xl lg:text-3xl text-center mb-12 text-gray-900">Complete The Look</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-8">
                @foreach($recommendations as $rec)
                <article class="group cursor-pointer">
                    <div class="aspect-[3/4] bg-gray-100 mb-4 relative overflow-hidden">
                        <img src="{{ $rec->images[0] ?? '' }}" width="300" height="400" alt="{{ $rec->name }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 mix-blend-multiply" loading="lazy">
                    </div>
                    <h3 class="font-serif text-sm mb-1 group-hover:underline text-gray-900">{{ $rec->name }}</h3>
                    <p class="text-xs text-gray-600 font-medium">${{ number_format($rec->price, 2) }}</p>
                </article>
                @endforeach
            </div>
        </section>
    </main>
@else
    <!-- Hero Section -->
    <section class="relative h-[50vh] sm:h-[60vh] w-full overflow-hidden bg-navy" aria-label="Products Hero">
        <div class="absolute inset-0">
            <div class="absolute inset-0 bg-black/20"></div>
        </div>

        <div class="absolute inset-0 flex flex-col items-center justify-center text-white text-center px-4">
            <h1 class="font-serif text-4xl sm:text-6xl lg:text-8xl mb-6 tracking-tight drop-shadow-lg">
                Our Products
            </h1>

            <p class="text-sm sm:text-lg font-bold tracking-[0.2em] uppercase mt-2 mb-8 max-w-lg leading-relaxed text-shadow-md">
                Discover our collection of premium fashion items
            </p>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-[1690px] mx-auto px-4 lg:px-8 pb-16 animate-fade-in">

        <!-- Products Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
            @foreach($products as $index => $product)
            <article class="group cursor-pointer animate-fade-in" style="animation-delay: {{ $index * 0.1 }}s">
                <div class="aspect-[3/4] bg-gray-100 mb-4 relative overflow-hidden">
                    <img src="{{ $product->images[0] ?? '' }}" width="300" height="400" alt="{{ $product->name }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 mix-blend-multiply" loading="lazy">
                </div>
                <h3 class="font-serif text-lg mb-2 group-hover:underline text-gray-900">{{ $product->name }}</h3>
                <p class="text-sm text-gray-600 mb-1">{{ $product->category->name }}</p>
                <p class="text-sm font-medium text-gray-900">${{ number_format($product->price, 2) }}</p>
                <div class="mt-2">
                    <a href="{{ route('products.show', $product->slug) }}" class="text-xs uppercase tracking-widest text-gray-600 hover:text-gray-900">View Details</a>
                </div>
            </article>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-12">
            {{ $products->links() }}
        </div>
    </main>
@endif
@endsection