@extends('layouts.app')

@section('title', $product->name . ' — 2Brother.Hub')

@section('content')

<!-- Breadcrumb -->
<div class="flex items-center gap-2 text-xs text-slate-400 mb-6">
    <a href="{{ route('home') }}" class="hover:text-brand-light">Home</a>
    <span>/</span>
    <a href="{{ route('products.index') }}" class="hover:text-brand-light">Shop</a>
    <span>/</span>
    <a href="{{ route('products.index', ['category' => $product->category->slug ?? '']) }}" class="hover:text-brand-light">
        {{ $product->category->name ?? 'Footwear' }}
    </a>
    <span>/</span>
    <span class="text-slate-200 font-semibold truncate max-w-[200px]">{{ $product->name }}</span>
</div>

<div x-data="{ 
    activeImg: 0, 
    sizeModal: false, 
    pincode: '', 
    deliveryMsg: '',
    checkPincode() {
        if(this.pincode.length >= 6) {
            this.deliveryMsg = '⚡ Express Delivery available by ' + new Date(Date.now() + 3*24*60*60*1000).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) + ' to ' + this.pincode;
        } else {
            this.deliveryMsg = 'Please enter a valid 6-digit postal pincode.';
        }
    }
}" class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-14">

    {{-- ===== 1. PRODUCT GALLERY (LEFT) ===== --}}
    <div>
        <!-- Main Large Image Preview -->
        <div class="relative aspect-square bg-ink-card rounded-3xl border border-white/10 overflow-hidden mb-4 shadow-2xl group">
            @forelse($product->images as $i => $img)
                <img x-show="activeImg === {{ $i }}" 
                     src="{{ $img->url }}" 
                     alt="{{ $product->name }}" 
                     class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
            @empty
                <div class="w-full h-full flex flex-col items-center justify-center text-slate-500">
                    <span class="text-6xl mb-2">👟</span>
                    <span class="text-sm">No photo available</span>
                </div>
            @endforelse

            <!-- Floating Discount Pill -->
            @if($product->discount_percent > 0)
                <span class="absolute top-4 left-4 bg-gradient-to-r from-brand to-brand-light text-ink text-xs font-black px-3 py-1 rounded-full shadow-lg">
                    {{ $product->discount_percent }}% OFF
                </span>
            @endif

            <!-- 100% Authentic Tag -->
            <span class="absolute bottom-4 right-4 bg-ink/90 backdrop-blur-md px-3 py-1 rounded-full border border-white/10 text-[11px] font-bold text-white flex items-center gap-1.5 shadow-md">
                <span class="w-2 h-2 rounded-full bg-emerald-400"></span> Verified Authentic
            </span>
        </div>

        <!-- Thumbnail Gallery Carousel -->
        @if($product->images->count() > 1)
            <div class="grid grid-cols-4 gap-3">
                @foreach($product->images as $i => $img)
                    <button @click="activeImg = {{ $i }}" 
                            :class="activeImg === {{ $i }} ? 'ring-2 ring-brand-light border-transparent scale-95' : 'opacity-70 hover:opacity-100 border-white/10'"
                            class="aspect-square rounded-2xl bg-ink-card border overflow-hidden transition duration-200">
                        <img src="{{ $img->url }}" class="w-full h-full object-cover">
                    </button>
                @endforeach
            </div>
        @endif
    </div>

    {{-- ===== 2. PRODUCT DETAILS & BUY BOX (RIGHT) ===== --}}
    <div class="flex flex-col justify-between">
        <div>
            <!-- Category & Brand Header -->
            <div class="flex items-center justify-between gap-2 mb-2">
                <span class="text-xs uppercase font-extrabold tracking-widest text-brand-light">
                    {{ $product->category->name ?? 'Footwear' }}
                </span>
                @if($product->brand)
                    <span class="text-xs px-2.5 py-0.5 rounded-full bg-white/5 border border-white/10 text-slate-300 font-semibold">
                        Brand: {{ $product->brand }}
                    </span>
                @endif
            </div>

            <!-- Product Title -->
            <h1 class="font-display font-black text-2xl sm:text-4xl text-white tracking-tight leading-tight mb-3">
                {{ $product->name }}
            </h1>

            <!-- Ratings & Reviews summary -->
            <div class="flex items-center gap-3 mb-5">
                <div class="flex items-center gap-1 text-amber-400 text-sm">
                    <span>★★★★★</span>
                    <span class="font-bold text-white text-xs ml-1">4.9</span>
                </div>
                <span class="text-slate-500 text-xs">&middot;</span>
                <span class="text-xs text-slate-400">142 Verified Ratings</span>
                <span class="text-slate-500 text-xs">&middot;</span>
                <span class="text-xs text-emerald-400 font-semibold">In Stock</span>
            </div>

            <!-- Price Highlight Card -->
            <div class="p-4 rounded-2xl bg-ink-card border border-white/10 mb-6">
                <div class="flex items-baseline gap-3">
                    <span class="font-display font-black text-3xl sm:text-4xl text-brand-light">₹{{ number_format($product->price, 2) }}</span>
                    @if($product->original_price > $product->price)
                        <span class="price-strike text-slate-400 text-lg font-semibold">₹{{ number_format($product->original_price, 2) }}</span>
                        <span class="bg-gradient-to-r from-brand to-brand-light text-ink text-xs font-black px-2.5 py-0.5 rounded-full">
                            Save ₹{{ number_format($product->original_price - $product->price, 2) }}
                        </span>
                    @endif
                </div>
                <p class="text-[11px] text-slate-400 mt-1">
                    Inclusive of estimated ₹{{ number_format($product->tax_amount, 2) }} GST. Free Express Delivery on orders over ₹999.
                </p>
            </div>

            <!-- Add to Cart / Buy Form -->
            <form action="{{ route('cart.add', $product) }}" method="POST" class="space-y-5 mb-8">
                @csrf

                <!-- Size Selection with Size Guide modal trigger -->
                @if(!empty($product->sizes))
                    <div>
                        <div class="flex items-center justify-between mb-2.5">
                            <label class="font-heading font-bold text-xs text-white">Select Size</label>
                            <button type="button" @click="sizeModal = true" class="text-xs text-brand-light hover:underline font-bold flex items-center gap-1">
                                <span>📐 Size Guide</span>
                            </button>
                        </div>
                        <div class="flex flex-wrap gap-2.5">
                            @foreach($product->sizes as $size)
                                <label class="cursor-pointer">
                                    <input type="radio" name="size" value="{{ $size }}" class="peer sr-only" {{ $loop->first ? 'checked' : '' }}>
                                    <span class="block px-4 py-2 rounded-xl bg-ink-card border border-white/15 text-xs font-bold text-slate-300 peer-checked:bg-gradient-to-r peer-checked:from-brand peer-checked:to-brand-hover peer-checked:text-white peer-checked:border-brand peer-checked:shadow-glow transition">
                                        {{ $size }}
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Color Selection -->
                @if(!empty($product->colors))
                    <div>
                        <label class="font-heading font-bold text-xs text-white block mb-2.5">Select Color</label>
                        <div class="flex flex-wrap gap-2.5">
                            @foreach($product->colors as $color)
                                <label class="cursor-pointer">
                                    <input type="radio" name="color" value="{{ $color }}" class="peer sr-only" {{ $loop->first ? 'checked' : '' }}>
                                    <span class="block px-4 py-2 rounded-xl bg-ink-card border border-white/15 text-xs font-semibold text-slate-300 peer-checked:bg-gradient-to-r peer-checked:from-brand peer-checked:to-brand-hover peer-checked:text-white peer-checked:border-brand peer-checked:shadow-glow transition">
                                        {{ $color }}
                                    </span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Quantity and Stock -->
                <div class="flex items-center gap-4 pt-1">
                    <div>
                        <label class="font-heading font-bold text-xs text-white block mb-1.5">Quantity</label>
                        <input type="number" name="quantity" value="1" min="1" max="{{ min($product->stock, 10) }}" 
                               class="w-24 bg-ink-card border border-white/15 rounded-xl px-3 py-2 text-sm text-center text-white focus:ring-2 focus:ring-brand-light focus:outline-none">
                    </div>
                    <div class="pt-5">
                        @if($product->stock > 0)
                            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-500/10 text-emerald-400 text-xs font-bold border border-emerald-500/20">
                                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
                                In Stock ({{ $product->stock }} units available)
                            </span>
                        @else
                            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-rose-500/10 text-rose-400 text-xs font-bold border border-rose-500/20">
                                Sold Out
                            </span>
                        @endif
                    </div>
                </div>

                <!-- Action Buttons: Add to Cart & Buy Now -->
                @if($product->stock > 0)
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
                        <button type="submit" class="w-full bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white font-bold py-3.5 px-6 rounded-full text-sm shadow-glow hover:shadow-glow-lg transition flex items-center justify-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                            <span>Add to Cart</span>
                        </button>
                        <button type="submit" name="buy_now" value="1" class="w-full bg-gradient-to-r from-brand-light to-cyan-400 hover:from-cyan-400 hover:to-brand-light text-ink font-black py-3.5 px-6 rounded-full text-sm shadow-glow hover:shadow-glow-lg transition flex items-center justify-center gap-2">
                            <span>⚡ Buy Now</span>
                        </button>
                    </div>
                @else
                    <button disabled class="w-full bg-slate-800 text-slate-500 font-bold py-3.5 rounded-full text-sm cursor-not-allowed">
                        Currently Out of Stock
                    </button>
                @endif
            </form>

            <!-- Pincode Delivery Estimator -->
            <div class="p-4 rounded-2xl bg-ink-card border border-white/10 mb-6">
                <label class="font-heading font-bold text-xs text-white block mb-2">Check Delivery & COD Availability</label>
                <div class="flex gap-2">
                    <input type="text" x-model="pincode" placeholder="Enter 6-digit Pincode" maxlength="6"
                           class="bg-ink border border-white/10 rounded-xl px-3.5 py-2 text-xs text-slate-100 placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none flex-1">
                    <button type="button" @click="checkPincode()" class="bg-white/10 hover:bg-white/20 text-brand-light text-xs font-bold px-4 py-2 rounded-xl transition border border-white/10">
                        Check
                    </button>
                </div>
                <p x-show="deliveryMsg" x-text="deliveryMsg" class="text-xs text-emerald-400 font-medium mt-2.5"></p>
            </div>

            <!-- Value Guarantees list -->
            <div class="grid grid-cols-2 gap-3 text-xs text-slate-300">
                <div class="flex items-center gap-2">
                    <span class="text-brand-light">✓</span> 100% Original Brand Guarantee
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-brand-light">✓</span> 7-Day Hassle-free Size Exchange
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-brand-light">✓</span> Cash On Delivery Available
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-brand-light">✓</span> 24/7 Footwear Care Support
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ===== 3. DETAILED SPECS & ACCORDIONS ===== --}}
<div class="mt-14 pt-10 border-t border-white/10" x-data="{ tab: 'description' }">
    <div class="flex border-b border-white/10 gap-6 text-sm font-heading font-bold mb-6 overflow-x-auto pb-2">
        <button @click="tab = 'description'" :class="tab === 'description' ? 'text-brand-light border-b-2 border-brand-light pb-2' : 'text-slate-400 hover:text-slate-200'">
            Description & Features
        </button>
        <button @click="tab = 'specs'" :class="tab === 'specs' ? 'text-brand-light border-b-2 border-brand-light pb-2' : 'text-slate-400 hover:text-slate-200'">
            Specs & Materials
        </button>
        <button @click="tab = 'shipping'" :class="tab === 'shipping' ? 'text-brand-light border-b-2 border-brand-light pb-2' : 'text-slate-400 hover:text-slate-200'">
            Shipping & Returns
        </button>
        <button @click="tab = 'reviews'" :class="tab === 'reviews' ? 'text-brand-light border-b-2 border-brand-light pb-2' : 'text-slate-400 hover:text-slate-200'">
            Verified Reviews (142)
        </button>
    </div>

    <!-- Description tab -->
    <div x-show="tab === 'description'" class="bg-ink-card border border-white/10 rounded-3xl p-6 sm:p-8 text-slate-300 text-sm leading-relaxed whitespace-pre-line">
        {{ $product->description }}
    </div>

    <!-- Specs tab -->
    <div x-show="tab === 'specs'" class="bg-ink-card border border-white/10 rounded-3xl p-6 sm:p-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
            <div class="flex justify-between py-2 border-b border-white/5"><span class="text-slate-400">Category</span><span class="font-bold text-white">{{ $product->category->name ?? 'Footwear' }}</span></div>
            <div class="flex justify-between py-2 border-b border-white/5"><span class="text-slate-400">Gender</span><span class="font-bold text-white">{{ $product->gender ?? 'Unisex' }}</span></div>
            <div class="flex justify-between py-2 border-b border-white/5"><span class="text-slate-400">Brand</span><span class="font-bold text-white">{{ $product->brand ?? '2Brother.Hub' }}</span></div>
            <div class="flex justify-between py-2 border-b border-white/5"><span class="text-slate-400">Sole Material</span><span class="font-bold text-white">Cushioned EVA & High-Grip Rubber</span></div>
            <div class="flex justify-between py-2 border-b border-white/5"><span class="text-slate-400">Closure Type</span><span class="font-bold text-white">Lace-Up / Slip-On</span></div>
            <div class="flex justify-between py-2 border-b border-white/5"><span class="text-slate-400">Warranty</span><span class="font-bold text-white">3 Months Brand Warranty</span></div>
        </div>
    </div>

    <!-- Shipping tab -->
    <div x-show="tab === 'shipping'" class="bg-ink-card border border-white/10 rounded-3xl p-6 sm:p-8 text-xs text-slate-300 space-y-3 leading-relaxed">
        <p>• <strong>Free Express Shipping:</strong> Orders above ₹999 qualify for free priority delivery within 3-5 business days across India.</p>
        <p>• <strong>7-Day Easy Exchange:</strong> If the size doesn't fit, request a doorstep exchange from your account with 0 reverse shipping charges.</p>
        <p>• <strong>Original Packaging:</strong> Products must be returned in unused condition with brand box and tags intact.</p>
    </div>

    <!-- Reviews tab -->
    <div x-show="tab === 'reviews'" class="bg-ink-card border border-white/10 rounded-3xl p-6 sm:p-8 space-y-4">
        <div class="flex items-center gap-4 border-b border-white/10 pb-4">
            <span class="text-4xl font-display font-black text-brand-light">4.9</span>
            <div>
                <div class="text-amber-400 text-sm">★★★★★</div>
                <p class="text-xs text-slate-400">Based on 142 verified sneakerhead reviews</p>
            </div>
        </div>
        <div class="space-y-3 text-xs">
            <div class="p-3 bg-white/5 rounded-2xl border border-white/5">
                <div class="flex justify-between text-white font-bold mb-1">
                    <span>Aman S. <span class="text-emerald-400 font-normal">✓ Verified Buyer</span></span>
                    <span class="text-amber-400">★★★★★</span>
                </div>
                <p class="text-slate-300">"Super comfortable sole and looks 10x better in person. Fits true to size!"</p>
            </div>
            <div class="p-3 bg-white/5 rounded-2xl border border-white/5">
                <div class="flex justify-between text-white font-bold mb-1">
                    <span>Rohan K. <span class="text-emerald-400 font-normal">✓ Verified Buyer</span></span>
                    <span class="text-amber-400">★★★★★</span>
                </div>
                <p class="text-slate-300">"Fast delivery within 2 days to Delhi. Top notch quality from 2Brother.Hub."</p>
            </div>
        </div>
    </div>
</div>

{{-- ===== 4. RELATED PRODUCTS ===== --}}
@if($related->isNotEmpty())
    <section class="mt-16">
        <div class="flex items-center justify-between mb-6">
            <div>
                <span class="text-xs uppercase font-bold tracking-widest text-brand-light">RECOMMENDED</span>
                <h2 class="font-display font-bold text-2xl text-white">You May Also Like</h2>
            </div>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-5">
            @foreach($related as $r)
                <x-product-card :product="$r" />
            @endforeach
        </div>
    </section>
@endif

{{-- ===== SIZE GUIDE MODAL ===== --}}
<div x-show="sizeModal" x-transition.opacity class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
    <div @click.outside="sizeModal = false" class="bg-ink-card border border-white/15 rounded-3xl p-6 sm:p-8 max-w-lg w-full shadow-2xl">
        <div class="flex items-center justify-between border-b border-white/10 pb-4 mb-4">
            <h3 class="font-display font-bold text-lg text-white">Footwear Size Conversion Chart</h3>
            <button @click="sizeModal = false" class="text-slate-400 hover:text-white text-xl">&times;</button>
        </div>
        <p class="text-xs text-slate-400 mb-4">Measure your heel-to-toe length in centimetres for the most accurate fit.</p>
        <table class="w-full text-xs text-center border-collapse mb-6">
            <thead>
                <tr class="bg-brand/20 text-brand-light font-bold">
                    <th class="p-2 border border-white/10">UK / India</th>
                    <th class="p-2 border border-white/10">US Men</th>
                    <th class="p-2 border border-white/10">EU</th>
                    <th class="p-2 border border-white/10">Foot Length (CM)</th>
                </tr>
            </thead>
            <tbody class="text-slate-200">
                <tr class="hover:bg-white/5"><td class="p-2 border border-white/10 font-bold">UK 6</td><td class="p-2 border border-white/10">US 7</td><td class="p-2 border border-white/10">EU 40</td><td class="p-2 border border-white/10">25.0 cm</td></tr>
                <tr class="hover:bg-white/5"><td class="p-2 border border-white/10 font-bold">UK 7</td><td class="p-2 border border-white/10">US 8</td><td class="p-2 border border-white/10">EU 41</td><td class="p-2 border border-white/10">25.8 cm</td></tr>
                <tr class="hover:bg-white/5"><td class="p-2 border border-white/10 font-bold">UK 8</td><td class="p-2 border border-white/10">US 9</td><td class="p-2 border border-white/10">EU 42</td><td class="p-2 border border-white/10">26.5 cm</td></tr>
                <tr class="hover:bg-white/5"><td class="p-2 border border-white/10 font-bold">UK 9</td><td class="p-2 border border-white/10">US 10</td><td class="p-2 border border-white/10">EU 43</td><td class="p-2 border border-white/10">27.3 cm</td></tr>
                <tr class="hover:bg-white/5"><td class="p-2 border border-white/10 font-bold">UK 10</td><td class="p-2 border border-white/10">US 11</td><td class="p-2 border border-white/10">EU 44</td><td class="p-2 border border-white/10">28.1 cm</td></tr>
                <tr class="hover:bg-white/5"><td class="p-2 border border-white/10 font-bold">UK 11</td><td class="p-2 border border-white/10">US 12</td><td class="p-2 border border-white/10">EU 45</td><td class="p-2 border border-white/10">29.0 cm</td></tr>
            </tbody>
        </table>
        <button @click="sizeModal = false" class="w-full bg-brand hover:bg-brand-hover text-white text-xs font-bold py-2.5 rounded-full transition shadow-glow">
            Got it, Back to Product
        </button>
    </div>
</div>

@endsection