@extends('layouts.app')

@section('content')
<div class="bg-gray-50 min-h-screen">
    {{-- Breadcrumb --}}
    <div class="bg-white border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <nav class="flex text-sm">
                <a href="{{ route('home') }}" class="text-gray-500 hover:text-gray-700">Home</a>
                <span class="mx-2 text-gray-400">/</span>
                <a href="{{ route('category.show', $product->category->slug) }}" class="text-gray-500 hover:text-gray-700">{{ $product->category->name }}</a>
                <span class="mx-2 text-gray-400">/</span>
                <span class="text-gray-900">{{ $product->name }}</span>
            </nav>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
            <div class="grid lg:grid-cols-2 gap-8 p-8">
                {{-- Product Images --}}
                <div>
                    <div class="aspect-square bg-gray-100 rounded-2xl overflow-hidden mb-4">
                        <img id="main-image" src="{{ $product->thumbnail_url }}" 
                             alt="{{ $product->name }}" 
                             class="w-full h-full object-cover">
                    </div>
                    @if($product->images->count() > 0)
                    <div class="grid grid-cols-4 gap-3">
                        <button class="aspect-square bg-gray-100 rounded-xl overflow-hidden border-2 border-blue-500"
                                onclick="document.getElementById('main-image').src='{{ $product->thumbnail_url }}'">
                            <img src="{{ $product->thumbnail_url }}" class="w-full h-full object-cover">
                        </button>
                        @foreach($product->images as $image)
                        <button class="aspect-square bg-gray-100 rounded-xl overflow-hidden border-2 border-transparent hover:border-blue-500 transition"
                                onclick="document.getElementById('main-image').src='{{ $image->image_url }}'">
                            <img src="{{ $image->image_url }}" class="w-full h-full object-cover">
                        </button>
                        @endforeach
                    </div>
                    @endif
                </div>

                {{-- Product Info --}}
                <div class="flex flex-col">
                    {{-- Category & Title --}}
                    <a href="{{ route('category.show', $product->category->slug) }}" 
                       class="text-blue-600 font-medium text-sm uppercase tracking-wide hover:underline">
                        {{ $product->category->name }}
                    </a>
                    <h1 class="text-3xl font-bold text-gray-900 mt-2 mb-4">{{ $product->name }}</h1>
                    
                    {{-- Rating --}}
                    <div class="flex items-center mb-4">
                        <div class="flex text-yellow-400">
                            @for($i = 1; $i <= 5; $i++)
                                <svg class="w-5 h-5 {{ $i <= round($product->average_rating) ? 'fill-current' : 'text-gray-300' }}" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                </svg>
                            @endfor
                        </div>
                        <span class="ml-2 text-gray-600">({{ $product->reviews->count() }} reviews)</span>
                        @if($product->is_in_stock)
                            <span class="ml-4 text-green-600 font-medium flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                In Stock
                            </span>
                        @else
                            <span class="ml-4 text-red-600 font-medium">Out of Stock</span>
                        @endif
                    </div>

                    {{-- Price --}}
                    <div class="flex items-baseline gap-3 mb-6">
                        @if($product->sale_price)
                            <span class="text-4xl font-bold text-red-600">৳{{ number_format($product->sale_price, 2) }}</span>
                            <span class="text-xl text-gray-400 line-through">৳{{ number_format($product->price, 2) }}</span>
                            <span class="bg-red-100 text-red-600 px-2 py-1 rounded-lg text-sm font-medium">Save {{ $product->discount_percent }}%</span>
                        @else
                            <span class="text-4xl font-bold text-gray-900">৳{{ number_format($product->price, 2) }}</span>
                        @endif
                    </div>

                    {{-- Short Description --}}
                    <p class="text-gray-600 mb-6">{{ $product->short_description }}</p>

                    {{-- Specifications --}}
                    <div class="grid grid-cols-2 gap-4 mb-6 text-sm">
                        <div class="flex items-center">
                            <span class="text-gray-500 w-24">SKU:</span>
                            <span class="text-gray-900 font-medium">{{ $product->sku }}</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-gray-500 w-24">Brand:</span>
                            <span class="text-gray-900 font-medium">{{ $product->brand }}</span>
                        </div>
                        <div class="flex items-center">
                            <span class="text-gray-500 w-24">Age:</span>
                            <span class="text-gray-900 font-medium">{{ $product->age_recommendation }}</span>
                        </div>
                        @if($product->weight)
                        <div class="flex items-center">
                            <span class="text-gray-500 w-24">Weight:</span>
                            <span class="text-gray-900 font-medium">{{ $product->weight }} kg</span>
                        </div>
                        @endif
                    </div>

                    {{-- Add to Cart Form --}}
                    <form action="{{ route('cart.add') }}" method="POST" class="mb-8" id="product-cart-form">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">

                        {{-- Quantity + Add to Cart Row --}}
                        <div class="flex flex-wrap items-stretch gap-3 mb-4">

                            {{-- Quantity Stepper --}}
                            <div class="flex items-center rounded-2xl overflow-hidden border-2 border-gray-200 bg-white shadow-sm h-12 select-none">
                                <button type="button" onclick="updateQuantity(-1)"
                                    class="w-11 h-full flex items-center justify-center text-xl font-bold text-gray-500 hover:text-[#2f9eb8] hover:bg-[#eef8fa] transition-all duration-150 active:scale-90">
                                    −
                                </button>
                                <input type="number" name="quantity" id="quantity" value="1" min="1" max="99"
                                    class="w-14 h-full text-center text-base font-bold text-gray-800 border-0 border-x-2 border-gray-200 focus:outline-none focus:ring-0 bg-white"
                                    style="-moz-appearance:textfield;appearance:textfield;"
                                    oninput="this.style.MozAppearance='textfield'">
                                <button type="button" onclick="updateQuantity(1)"
                                    class="w-11 h-full flex items-center justify-center text-xl font-bold text-gray-500 hover:text-[#2f9eb8] hover:bg-[#eef8fa] transition-all duration-150 active:scale-90">
                                    +
                                </button>
                            </div>

                            {{-- Add to Cart Button --}}
                            <button type="submit" name="action" value="cart"
                                    class="flex-1 min-w-[140px] h-12 rounded-2xl font-bold text-sm sm:text-base transition-all duration-200
                                           border-2 border-[#2f9eb8] text-[#2f9eb8]
                                           hover:bg-[#2f9eb8] hover:text-white hover:shadow-lg active:scale-95
                                           flex items-center justify-center gap-2"
                                    {{ !$product->is_in_stock ? 'disabled style=opacity:0.5;cursor:not-allowed' : '' }}>
                                <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                                </svg>
                                Add to Cart
                            </button>

                            {{-- Wishlist --}}
                            @auth
                            <button type="button" onclick="toggleWishlist({{ $product->id }})"
                                    class="w-12 h-12 rounded-2xl border-2 border-gray-200 flex items-center justify-center text-gray-400
                                           hover:text-red-500 hover:border-red-400 hover:bg-red-50 transition-all duration-200 active:scale-90 flex-shrink-0">
                                <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                                </svg>
                            </button>
                            @endauth
                        </div>

                        {{-- Buy Now + WhatsApp Row --}}
                        <div class="flex flex-col sm:flex-row gap-3">
                            {{-- Buy Now --}}
                            <button type="submit" name="checkout" value="1"
                                    class="flex-1 h-13 py-3 px-6 rounded-2xl font-extrabold text-base transition-all duration-200
                                           bg-gradient-to-r from-[#2f9eb8] to-[#1a7a96] text-white
                                           hover:from-[#257d91] hover:to-[#145f75] hover:shadow-xl active:scale-95
                                           flex items-center justify-center gap-2 shadow-md"
                                    {{ !$product->is_in_stock ? 'disabled style=opacity:0.5;cursor:not-allowed' : '' }}>
                                <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                </svg>
                                Buy Now
                            </button>

                            {{-- WhatsApp --}}
                            @php
                                $whatsappMessage = urlencode("Hi, I want to order: " . $product->name . " - " . route('product.show', $product->slug));
                                $whatsappNumber = \App\Models\Setting::get('whatsapp_number', '+8801700000000');
                            @endphp
                            <a href="https://wa.me/{{ $whatsappNumber }}?text={{ $whatsappMessage }}" target="_blank"
                               class="flex-1 h-13 py-3 px-6 rounded-2xl font-extrabold text-base transition-all duration-200
                                      bg-gradient-to-r from-[#25d366] to-[#128c7e] text-white
                                      hover:from-[#1db954] hover:to-[#0c6b5e] hover:shadow-xl active:scale-95
                                      flex items-center justify-center gap-2 shadow-md">
                                <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 00-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                                </svg>
                                Order on WhatsApp
                            </a>
                        </div>
                    </form>

                    {{-- Trust Badges --}}
                    <div class="flex gap-4 text-sm text-gray-500">
                        <div class="flex items-center">
                            <svg class="w-5 h-5 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
                            </svg>
                            Secure Payment
                        </div>
                        <div class="flex items-center">
                            <svg class="w-5 h-5 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
                                <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7h4a1 1 0 011 1v6.05A2.5 2.5 0 0115.95 16H14a1 1 0 01-1-1V8a1 1 0 011-1z"/>
                            </svg>
                            Fast Delivery
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tabs Section --}}
        <div class="mt-8 bg-white rounded-2xl shadow-sm overflow-hidden">
            <div class="border-b">
                <div class="flex">
                    <button class="px-6 py-4 text-blue-600 border-b-2 border-blue-600 font-medium">Description</button>
                    <button class="px-6 py-4 text-gray-500 hover:text-gray-700 font-medium">Reviews ({{ $product->reviews->count() }})</button>
                </div>
            </div>
            <div class="p-8">
                <div class="prose max-w-none">
                    <h3 class="text-xl font-semibold mb-4">Product Description</h3>
                    <p class="text-gray-600 mb-6">{!! nl2br(e($product->description)) !!}</p>
                    
                    @if($product->features)
                    <h3 class="text-xl font-semibold mb-4">Features & Benefits</h3>
                    <p class="text-gray-600 mb-6">{!! nl2br(e($product->features)) !!}</p>
                    @endif
                </div>
            </div>
        </div>

        {{-- Related Products --}}
        @if($related->count() > 0)
        <div class="mt-12">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">You May Also Like</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($related as $product)
                    @include('components.product-card', ['product' => $product])
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>

<script>
    function updateQuantity(change) {
        const input = document.getElementById('quantity');
        let value = parseInt(input.value) + change;
        if (value < 1) value = 1;
        if (value > 99) value = 99;
        input.value = value;
    }
</script>
@endsection