@extends('layouts.app')

@php
    $currentLocale = app()->getLocale();
    $translation = $product->translate($currentLocale);
//    $currentPrice = $product->current_price; // ✅ NEW: Use current_price accessor
    $primaryImage = $product->images->where('is_primary', true)->first() ?: $product->images->first();
@endphp

@section('title', $translation->meta_title ?: $translation->name)
@section('meta_description', $translation->meta_description ?: $translation->short_description)
@section('meta_keywords', $translation->meta_keywords)

@push('meta')
    {{-- ✅ ENHANCED: Better SEO meta tags --}}
    <meta name="title" content="{{ $translation->meta_title ?: $translation->name }}">
    <meta name="description" content="{{ $translation->meta_description ?: $translation->short_description }}">
    @if($translation->meta_keywords)
        <meta name="keywords" content="{{ $translation->meta_keywords }}">
    @endif

    {{-- ✅ NEW: Product-specific meta tags --}}
    <meta name="product:price:amount" content="{{ $product->sale_price }}">
    <meta name="product:price:currency" content="SAR">
    <meta name="product:availability" content="{{ $availabilityInfo['stock_status'] === 'in_stock' ? 'in stock' : 'out of stock' }}">
    <meta name="product:condition" content="new">
    @if($product->brand)
        <meta name="product:brand" content="{{ $product->brand }}">
    @endif

    {{-- Enhanced Open Graph --}}
    <meta property="og:type" content="product">
    <meta property="og:title" content="{{ $translation->meta_title ?: $translation->name }}">
    <meta property="og:description" content="{{ $translation->meta_description ?: $translation->short_description }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:site_name" content="{{ config('app.name') }}">
    @if($primaryImage)
        <meta property="og:image" content="{{ Storage::url($primaryImage->image_path) }}">
        <meta property="og:image:width" content="1200">
        <meta property="og:image:height" content="630">
        <meta property="og:image:alt" content="{{ $primaryImage->alt_text ?: $translation->name }}">
    @endif

    {{-- Product-specific Open Graph --}}
    <meta property="product:brand" content="{{ $product->brand ?: config('app.name') }}">
    <meta property="product:availability" content="{{ $availabilityInfo['stock_status'] === 'in_stock' ? 'in stock' : 'out of stock' }}">
    <meta property="product:condition" content="new">
    <meta property="product:price:amount" content="{{ $product->sale_price }}">
    <meta property="product:price:currency" content="SAR">
@endpush

@push('structured_data')
    {{-- ✅ ENHANCED: Rich structured data --}}
    <script type="application/ld+json">
        {!! json_encode($productData ?? []) !!}
    </script>

    {{-- Breadcrumb structured data --}}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "{{ __('Home') }}",
                    "item": "{{ url('/') }}"
                },
                {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "{{ __('Products') }}",
                    "item": "{{ route('products.index') }}"
                },
        @if($product->categories->isNotEmpty())
            {
                "@type": "ListItem",
                "position": 3,
                "name": "{{ $product->categories->first()->translate($currentLocale)->name }}",
                    "item": "{{ route('products.category', $product->categories->first()->translate($currentLocale)->slug) }}"
                },
        @endif
        {
            "@type": "ListItem",
            "position": {{ $product->categories->isNotEmpty() ? 4 : 3 }},
                    "name": "{{ $translation->name }}",
                    "item": "{{ url()->current() }}"
                }
            ]
        }
    </script>
@endpush

@push('styles')
    <style>
        .product-hero {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 2rem 0;
            margin-bottom: 2rem;
        }

        .product-gallery {
            position: sticky;
            top: 2rem;
        }

        .gallery-main {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            background: #fff;
        }

        .gallery-main img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .gallery-main:hover img {
            transform: scale(1.05);
        }

        .gallery-controls {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: flex;
            gap: 0.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-main:hover .gallery-controls {
            opacity: 1;
        }

        .gallery-btn {
            background: rgba(255,255,255,0.9);
            border: none;
            padding: 0.5rem;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .gallery-btn:hover {
            background: white;
            transform: scale(1.1);
        }

        .gallery-thumbs {
            display: flex;
            gap: 0.75rem;
            margin-top: 1rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
        }

        .thumb-item {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            border: 3px solid transparent;
            transition: all 0.3s ease;
        }

        .thumb-item.active,
        .thumb-item:hover {
            border-color: #007bff;
            transform: scale(1.05);
        }

        .thumb-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-badges {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .product-badge {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .badge-featured {
            background: linear-gradient(45deg, #ffd700, #ffed4a);
            color: #333;
        }

        .badge-sale {
            background: linear-gradient(45deg, #dc3545, #c82333);
            color: white;
            animation: pulse 2s infinite;
        }

        .badge-new {
            background: linear-gradient(45deg, #28a745, #20c997);
            color: white;
        }

        .badge-cod {
            background: linear-gradient(45deg, #17a2b8, #138496);
            color: white;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .product-meta {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #6c757d;
            font-size: 0.9rem;
        }

        .price-section {
            margin: 2rem 0;
            padding: 1.5rem;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 12px;
            border: 1px solid #dee2e6;
        }

        .current-price {
            font-size: 2.5rem;
            font-weight: 800;
            color: #28a745;
            margin-bottom: 0.5rem;
        }

        .original-price {
            font-size: 1.5rem;
            color: #6c757d;
            text-decoration: line-through;
            margin-right: 1rem;
        }

        .discount-info {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        .discount-badge {
            background: #dc3545;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .savings-amount {
            color: #28a745;
            font-weight: 600;
        }

        .stock-section {
            margin: 1.5rem 0;
            padding: 1rem;
            border-radius: 8px;
            border: 2px solid;
        }

        .stock-in {
            background: #d4fdd4;
            border-color: #28a745;
            color: #155724;
        }

        .stock-low {
            background: #fff3cd;
            border-color: #ffc107;
            color: #856404;
        }

        .stock-out {
            background: #f8d7da;
            border-color: #dc3545;
            color: #721c24;
        }

        .product-actions {
            margin: 2rem 0;
        }

        .quantity-selector {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .qty-control {
            display: flex;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
        }

        .qty-btn {
            background: #f8f9fa;
            border: none;
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .qty-btn:hover {
            background: #e9ecef;
        }

        .qty-input {
            border: none;
            width: 60px;
            text-align: center;
            padding: 0.5rem;
            font-weight: 600;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-add-cart {
            background: linear-gradient(45deg, #007bff, #0056b3);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            flex: 1;
            min-width: 200px;
        }

        .btn-add-cart:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,123,255,0.3);
        }

        .btn-add-cart:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn-secondary-action {
            background: white;
            border: 2px solid #dee2e6;
            color: #6c757d;
            padding: 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-secondary-action:hover {
            border-color: #007bff;
            color: #007bff;
            transform: translateY(-2px);
        }

        .product-stats {
            display: flex;
            gap: 2rem;
            margin: 2rem 0;
            padding: 1.5rem;
            background: #f8f9fa;
            border-radius: 8px;
            flex-wrap: wrap;
        }

        .stat-item {
            text-align: center;
            flex: 1;
            min-width: 120px;
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: #007bff;
        }

        .stat-label {
            color: #6c757d;
            font-size: 0.9rem;
        }

        .product-tabs {
            margin-top: 3rem;
        }

        .nav-tabs {
            border-bottom: 3px solid #dee2e6;
            margin-bottom: 2rem;
        }

        .nav-link {
            border: none;
            color: #6c757d;
            font-weight: 600;
            padding: 1rem 2rem;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
        }

        .nav-link.active,
        .nav-link:hover {
            background: none;
            color: #007bff;
            border-bottom-color: #007bff;
        }

        .tab-content {
            padding: 2rem 0;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 2rem;
        }

        .feature-list li:before {
            content: "✓";
            color: #28a745;
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 0.75rem;
        }

        .specification-table {
            width: 100%;
            border-collapse: collapse;
        }

        .specification-table th,
        .specification-table td {
            padding: 1rem;
            border-bottom: 1px solid #dee2e6;
            text-align: left;
        }

        .specification-table th {
            background: #f8f9fa;
            font-weight: 600;
            width: 30%;
        }

        .related-products {
            margin-top: 4rem;
        }

        .product-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            height: 100%;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .product-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .product-card-body {
            padding: 1.5rem;
        }

        .recently-viewed {
            margin-top: 3rem;
            padding: 2rem;
            background: #f8f9fa;
            border-radius: 12px;
        }

        @media (max-width: 768px) {
            .gallery-main img {
                height: 300px;
            }

            .current-price {
                font-size: 2rem;
            }

            .product-meta {
                flex-direction: column;
                gap: 0.5rem;
            }

            .action-buttons {
                flex-direction: column;
            }

            .btn-add-cart {
                min-width: auto;
            }
        }
    </style>
@endpush

@section('content')
    {{-- ✅ NEW: Product Hero Section --}}
    <div class="product-hero">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}">{{ __('Home') }}</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('products.index') }}">{{ __('Products') }}</a>
                    </li>
                    @if($product->categories->isNotEmpty())
                        <li class="breadcrumb-item">
                            <a href="{{ route('products.category', $product->categories->first()->translate($currentLocale)->slug) }}">
                                {{ $product->categories->first()->translate($currentLocale)->name }}
                            </a>
                        </li>
                    @endif
                    <li class="breadcrumb-item active" aria-current="page">
                        {{ $translation->name }}
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="container py-4">
        <div class="row">
            {{-- ✅ ENHANCED: Product Gallery --}}
            <div class="col-lg-6 mb-4">
                <div class="product-gallery">
                    <div class="gallery-main">
                        @if($primaryImage)
                            <img src="{{ Storage::url($primaryImage->image_path) }}"
                                 alt="{{ $primaryImage->alt_text ?: $translation->name }}"
                                 id="mainImage"
                                 loading="eager">
                        @else
                            <img src="{{ asset('images/placeholder-product.jpg') }}"
                                 alt="{{ $translation->name }}"
                                 id="mainImage"
                                 loading="eager">
                        @endif

                        {{-- ✅ NEW: Gallery Controls --}}
                        <div class="gallery-controls">
                            <button class="gallery-btn" onclick="zoomImage()" title="{{ __('Zoom') }}">
                                <i class="fas fa-search-plus"></i>
                            </button>
                            <button class="gallery-btn" onclick="shareProduct()" title="{{ __('Share') }}">
                                <i class="fas fa-share-alt"></i>
                            </button>
                            <button class="gallery-btn" onclick="toggleWishlist({{ $product->id }})" title="{{ __('Add to Wishlist') }}">
                                <i class="far fa-heart" id="wishlistIcon"></i>
                            </button>
                        </div>
                    </div>

                    {{-- ✅ ENHANCED: Thumbnails --}}
                    @if($product->images->count() > 1)
                        <div class="gallery-thumbs">
                            @foreach($product->images->sortBy('sort_order') as $image)
                                <div class="thumb-item {{ $loop->first ? 'active' : '' }}"
                                     onclick="changeMainImage('{{ Storage::url($image->image_path) }}', this)">
                                    <img src="{{ Storage::url($image->image_path) }}"
                                         alt="{{ $image->alt_text ?: $translation->name }}"
                                         loading="lazy">
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- ✅ ENHANCED: Product Info --}}
            <div class="col-lg-6">
                <div class="product-info">
                    {{-- ✅ NEW: Product Badges --}}
                    <div class="product-badges">
                        @if($product->is_featured)
                            <span class="product-badge badge-featured">
                                <i class="fas fa-star"></i>
                                {{ __('Featured') }}
                            </span>
                        @endif
                        @if($availabilityInfo['is_sale_active'] ?? false)
                            <span class="product-badge badge-sale">
                                <i class="fas fa-fire"></i>
                                {{ __('Sale') }}
                            </span>
                        @endif
                        @if($product->created_at->diffInDays() < 7)
                            <span class="product-badge badge-new">
                                <i class="fas fa-sparkles"></i>
                                {{ __('New') }}
                            </span>
                        @endif
                        @if($product->cod_eligible)
                            <span class="product-badge badge-cod">
                                <i class="fas fa-money-bill-wave"></i>
                                {{ __('COD Available') }}
                            </span>
                        @endif
                    </div>

                    <h1>{{ $translation->name }}</h1>

                    {{-- ✅ ENHANCED: Product Meta --}}
                    <div class="product-meta">
                        <div class="meta-item">
                            <i class="fas fa-barcode"></i>
                            <span>{{ __('SKU') }}: {{ $product->sku }}</span>
                        </div>
                        @if($product->brand)
                            <div class="meta-item">
                                <i class="fas fa-tag"></i>
                                <span>{{ __('Brand') }}: {{ $product->brand }}</span>
                            </div>
                        @endif
                        @if($product->model)
                            <div class="meta-item">
                                <i class="fas fa-cube"></i>
                                <span>{{ __('Model') }}: {{ $product->model }}</span>
                            </div>
                        @endif
                        <div class="meta-item">
                            <i class="fas fa-eye"></i>
                            <span>{{ number_format($productStats['views_count']) }} {{ __('views') }}</span>
                        </div>
                    </div>

                    {{-- ✅ NEW: Short Description --}}
                    @if($translation->short_description)
                        <div class="short-description mb-3">
                            <p class="lead">{{ $translation->short_description }}</p>
                        </div>
                    @endif

                    {{-- ✅ ENHANCED: Price Section with Sale Info --}}

                    @php
                        $basePrice = $product->sale_price ?: $product->price;
                        $vatAmount = $basePrice * ($product->tax_rate/100);
                        $customerPrice = $basePrice + $vatAmount;
                    @endphp




                    <div class="price-section">
                        <div class="current-price">{{ number_format($customerPrice, 2) }} {{ __('SAR') }}</div>

                        @if($product->sale_price && $product->isSaleActive())
                            <div class="discount-info">
                                <span class="original-price">{{ number_format($product->price, 2) }} {{ __('SAR') }}</span>
                                <span class="discount-badge">
                                    -{{ $product->discount_percentage }}%
                                </span>
                                <span class="savings-amount">
                                    {{ __('You save') }}: {{ number_format($product->price - $product->sale_price, 2) }} {{ __('SAR') }}
                                </span>
                            </div>

                            {{-- ✅ NEW: Sale Timer --}}
                            @if($product->sale_ends_at)
                                <div class="sale-timer mt-2">
                                    <small class="text-muted">
                                        <i class="fas fa-clock"></i>
                                        {{ __('Sale ends') }}: {{ $product->sale_ends_at->format('M d, Y H:i') }}
                                    </small>
                                </div>
                            @endif
                        @endif
                    </div>

                    {{-- ✅ ENHANCED: Stock Status --}}
                    <div class="stock-section stock-{{ $availabilityInfo['stock_status'] === 'in_stock' ? 'in' : ($availabilityInfo['stock_status'] === 'low_stock' ? 'low' : 'out') }}">
                        @switch($availabilityInfo['stock_status'])
                            @case('in_stock')
                                <i class="fas fa-check-circle"></i>
                                {{ __('In Stock') }}
                                @if($availabilityInfo['quantity_available'])
                                    ({{ $availabilityInfo['quantity_available'] }} {{ __('available') }})
                                @endif
                                @break
                            @case('low_stock')
                                <i class="fas fa-exclamation-triangle"></i>
                                {{ __('Low Stock') }} - {{ __('Only') }} {{ $availabilityInfo['quantity_available'] }} {{ __('left') }}!
                                @break
                            @case('out_of_stock')
                                <i class="fas fa-times-circle"></i>
                                {{ __('Out of Stock') }}
                                @break
                        @endswitch
                    </div>

                    {{-- ✅ NEW: Product Stats --}}
                    <div class="product-stats">
                        <div class="stat-item">
                            <div class="stat-number">{{ number_format($productStats['views_count']) }}</div>
                            <div class="stat-label">{{ __('Views') }}</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">{{ $productStats['times_purchased'] }}</div>
                            <div class="stat-label">{{ __('Sold') }}</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">{{ $productStats['in_wishlist_count'] }}</div>
                            <div class="stat-label">{{ __('In Wishlists') }}</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-number">{{ $reviewsSummary['average_rating'] }}</div>
                            <div class="stat-label">{{ __('Rating') }}</div>
                        </div>
                    </div>

                    {{-- ✅ ENHANCED: Product Actions --}}
                    <div class="product-actions">
                        <div class="quantity-selector">
                            <label for="quantity" class="form-label fw-bold">{{ __('Quantity') }}:</label>
                            <div class="qty-control">
                                <button type="button" class="qty-btn" onclick="changeQuantity(-1)">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <input type="number"
                                       id="quantity"
                                       class="qty-input"
                                       value="1"
                                       min="1"
                                       max="{{ $product->track_inventory ? $product->quantity : 999 }}">
                                <button type="button" class="qty-btn" onclick="changeQuantity(1)">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>

                        <div class="action-buttons">
                            <button type="button"
                                    class="btn-add-cart"
                                    onclick="addToCart('{{ $translation->slug }}')"
                                    id="addToCartBtn"
                                {{ $availabilityInfo['stock_status'] === 'out_of_stock' ? 'disabled' : '' }}>
                                <i class="fas fa-shopping-cart me-2"></i>
                                @if($availabilityInfo['stock_status'] === 'out_of_stock')
                                    {{ __('Out of Stock') }}
                                @else
                                    {{ __('Add to Cart') }}
                                @endif
                            </button>

                            <button type="button" class="btn-secondary-action" onclick="toggleWishlist({{ $product->id }})" id="wishlistBtn">
                                <i class="far fa-heart"></i>
                            </button>

                            <button type="button" class="btn-secondary-action" onclick="shareProduct()">
                                <i class="fas fa-share-alt"></i>
                            </button>

                            <button type="button" class="btn-secondary-action" onclick="compareProduct({{ $product->id }})">
                                <i class="fas fa-balance-scale"></i>
                            </button>
                        </div>
                    </div>

                    {{-- ✅ NEW: Additional Info --}}
                    <div class="additional-info mt-4">
                        <div class="row">
                            <div class="col-6">
                                <strong>{{ __('Categories') }}:</strong>
                                @foreach($product->categories as $category)
                                    <a href="{{ route('products.category', $category->translate($currentLocale)->slug) }}"
                                       class="badge bg-light text-dark me-1">
                                        {{ $category->translate($currentLocale)->name }}
                                    </a>
                                @endforeach
                            </div>
                            <div class="col-6">
                                @if($product->cod_eligible)
                                    <div class="text-success">
                                        <i class="fas fa-money-bill-wave me-1"></i>
                                        {{ __('Cash on Delivery Available') }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ✅ ENHANCED: Product Details Tabs --}}
        <div class="product-tabs">
            <ul class="nav nav-tabs" id="productTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="description-tab" data-bs-toggle="tab"
                            data-bs-target="#description" type="button" role="tab">
                        {{ __('Description') }}
                    </button>
                </li>
                @if($translation->features)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="features-tab" data-bs-toggle="tab" data-bs-target="#features"
                                type="button" role="tab">
                            {{ __('Features') }}
                        </button>
                    </li>
                @endif
                @if($translation->specifications)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="specifications-tab" data-bs-toggle="tab"
                                data-bs-target="#specifications" type="button" role="tab">
                            {{ __('Specifications') }}
                        </button>
                    </li>
                @endif
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="reviews-tab" data-bs-toggle="tab"
                            data-bs-target="#reviews" type="button" role="tab">
                        {{ __('Reviews') }} ({{ $reviewsSummary['total_reviews'] }})
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="productTabsContent">
                {{-- Description Tab --}}
                <div class="tab-pane fade show active" id="description" role="tabpanel">
                    <div class="py-4">
                        {!! nl2br(e($translation->description)) !!}
                    </div>
                </div>

                {{-- Features Tab --}}
                @if($translation->features)
                    <div class="tab-pane fade" id="features" role="tabpanel">
                        <div class="py-4">
                            <ul class="feature-list">
                                @foreach(array_filter(explode("\n", $translation->features)) as $feature)
                                    <li>{{ trim(str_replace(['•', '-', '*'], '', $feature)) }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                {{-- Specifications Tab --}}
                @if($translation->specifications)
                    <div class="tab-pane fade" id="specifications" role="tabpanel">
                        <div class="py-4">
                            <table class="specification-table">
                                @foreach(array_filter(explode("\n", $translation->specifications)) as $spec)
                                    @if(strpos($spec, ':') !== false)
                                        @php
                                            [$key, $value] = explode(':', $spec, 2);
                                        @endphp
                                        <tr>
                                            <th>{{ trim($key) }}</th>
                                            <td>{{ trim($value) }}</td>
                                        </tr>
                                    @endif
                                @endforeach
                            </table>
                        </div>
                    </div>
                @endif

                {{-- ✅ NEW: Reviews Tab (Placeholder) --}}
                <div class="tab-pane fade" id="reviews" role="tabpanel">
                    <div class="py-4">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="text-center">
                                    <h3>{{ $reviewsSummary['average_rating'] }}</h3>
                                    <div class="text-warning mb-2">
                                        @for($i = 1; $i <= 5; $i++)
                                            <i class="fas fa-star {{ $i <= $reviewsSummary['average_rating'] ? '' : 'text-muted' }}"></i>
                                        @endfor
                                    </div>
                                    <p class="text-muted">{{ $reviewsSummary['total_reviews'] }} {{ __('reviews') }}</p>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="rating-breakdown">
                                    @foreach([5,4,3,2,1] as $stars)
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="me-2">{{ $stars }} <i class="fas fa-star text-warning"></i></span>
                                            <div class="progress flex-fill me-2" style="height: 8px;">
                                                <div class="progress-bar" style="width: {{ ($reviewsSummary['rating_distribution'][$stars] / $reviewsSummary['total_reviews']) * 100 }}%"></div>
                                            </div>
                                            <span class="small">{{ $reviewsSummary['rating_distribution'][$stars] }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="text-center text-muted">
                            <p>{{ __('Review system coming soon!') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ✅ ENHANCED: Related Products --}}
        @if($relatedProducts->isNotEmpty())
            <div class="related-products">
                <h3 class="mb-4">{{ __('Related Products') }}</h3>
                <div class="row">
                    @foreach($relatedProducts as $relatedProduct)
                        @php
                            $relatedTranslation = $relatedProduct->translate($currentLocale);
                            $relatedImage = $relatedProduct->images->where('is_primary', true)->first() ?: $relatedProduct->images->first();
                        @endphp
                        <div class="col-md-3 mb-4">
                            <div class="product-card">
                                <a href="{{ route('products.show', $relatedTranslation->slug) }}">
                                    @if($relatedImage)
                                        <img src="{{ Storage::url($relatedImage->image_path) }}"
                                             alt="{{ $relatedImage->alt_text ?: $relatedTranslation->name }}"
                                             loading="lazy">
                                    @else
                                        <img src="{{ asset('images/placeholder-product.jpg') }}"
                                             alt="{{ $relatedTranslation->name }}"
                                             loading="lazy">
                                    @endif
                                </a>
                                <div class="product-card-body">
                                    <h6>
                                        <a href="{{ route('products.show', $relatedTranslation->slug) }}"
                                           class="text-decoration-none">
                                            {{ $relatedTranslation->name }}
                                        </a>
                                    </h6>
                                    <div class="price mb-2">
                                        <span class="fw-bold text-success">{{ number_format($relatedProduct->current_price, 2) }} {{ __('SAR') }}</span>
                                        @if($relatedProduct->sale_price && $relatedProduct->price > $relatedProduct->sale_price)
                                            <small class="text-muted text-decoration-line-through ms-1">
                                                {{ number_format($relatedProduct->price, 2) }} {{ __('SAR') }}
                                            </small>
                                        @endif
                                    </div>
                                    <button type="button"
                                            class="btn btn-primary btn-sm w-100"
                                            onclick="addToCart({{ $relatedProduct->id }})">
                                        {{ __('Add to Cart') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- ✅ FIXED: Recently Viewed Products --}}
        @if($recentlyViewed->isNotEmpty())
            <div class="recently-viewed">
                <h4 class="mb-3">{{ __('Recently Viewed') }}</h4>
                <div class="row">
                    @foreach($recentlyViewed->take(4) as $viewedItem)
                        @php
                            // ✅ FIX: Handle the enhanced array structure
                            $viewedProduct = $viewedItem['product'] ?? $viewedItem;
                            $viewedTranslation = $viewedItem['translation'] ?? $viewedProduct->translate($currentLocale);
                            $viewedImage = $viewedProduct->images->where('is_primary', true)->first() ?: $viewedProduct->images->first();
                        @endphp
                        <div class="col-md-3 mb-3">
                            <div class="d-flex">
                                @if($viewedImage)
                                    <img src="{{ Storage::url($viewedImage->image_path) }}"
                                         alt="{{ $viewedTranslation->name }}"
                                         class="rounded me-3"
                                         style="width: 60px; height: 60px; object-fit: cover;">
                                @endif
                                <div>
                                    <h6 class="mb-1">
                                        <a href="{{ route('products.show', $viewedTranslation->slug) }}"
                                           class="text-decoration-none">
                                            {{ Str::limit($viewedTranslation->name, 30) }}
                                        </a>
                                    </h6>
                                    <small class="text-success fw-bold">{{ number_format($viewedProduct->current_price, 2) }} {{ __('SAR') }}</small>
                                    {{-- ✅ NEW: Show when it was viewed --}}
                                    @if(isset($viewedItem['viewed_at']))
                                        <br><small class="text-muted">{{ __('Viewed') }} {{ $viewedItem['viewed_at']->diffForHumans() }}</small>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>

    {{-- ✅ NEW: Image Zoom Modal --}}
    <div class="modal fade" id="imageZoomModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ $translation->name }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="" id="zoomedImage" class="img-fluid" style="max-height: 70vh;">
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // ✅ ENHANCED: JavaScript with all new features
        let currentQuantity = 1;
        const maxQuantity = {{ $product->track_inventory ? $product->quantity : 999 }};

        // Change main image
        function changeMainImage(src, element) {
            document.getElementById('mainImage').src = src;
            document.querySelectorAll('.thumb-item').forEach(thumb => {
                thumb.classList.remove('active');
            });
            element.classList.add('active');
        }

        // ✅ NEW: Quantity controls
        function changeQuantity(delta) {
            const input = document.getElementById('quantity');
            let newValue = parseInt(input.value) + delta;
            newValue = Math.max(1, Math.min(newValue, maxQuantity));
            input.value = newValue;
            currentQuantity = newValue;
        }

        // ✅ ENHANCED: Add to cart with loading state
        function addToCart(productId) {
            const btn = event.target;
            const originalText = btn.innerHTML;

            // Update button state
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ __("Adding...") }}';

            fetch(`{{ url('/') }}/{{ app()->getLocale() }}/cart/add/${productId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({quantity: 1})
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Success state
                        btn.innerHTML = '<i class="fas fa-check me-2"></i>{{ __("Added!") }}';
                        btn.style.background = '#28a745';

                        // Update cart count
                        updateCartCount();

                        // Show success message
                        showToast('{{ __("Product added to cart!") }}', 'success');

                        // Reset button after 2 seconds
                        setTimeout(() => {
                            btn.innerHTML = originalText;
                            btn.style.background = '';
                            btn.disabled = false;
                        }, 2000);
                    } else {
                        throw new Error(data.message);
                    }
                })
                .catch(error => {
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                    showToast(error.message || '{{ __("Error adding to cart") }}', 'error');
                });
        }

        // ✅ ENHANCED: Wishlist functionality
        function toggleWishlist(productId) {
            const icon = document.querySelector('#wishlistIcon');

            fetch(`{{ url('/') }}/{{ app()->getLocale() }}/wishlist/toggle/${productId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if(data.success) {
                        if(data.in_wishlist) {
                            icon.classList.remove('far');
                            icon.classList.add('fas', 'text-danger');
                            showToast('{{ __("Added to wishlist!") }}', 'success');
                        } else {
                            icon.classList.remove('fas', 'text-danger');
                            icon.classList.add('far');
                            showToast('{{ __("Removed from wishlist!") }}', 'info');
                        }
                        updateWishlistCount();
                    } else {
                        showToast(data.message, 'error');
                    }
                })
                .catch(error => {
                    showToast('{{ __("Error updating wishlist") }}', 'error');
                });
        }

        // ✅ NEW: Image zoom
        function zoomImage() {
            const mainImage = document.getElementById('mainImage');
            const zoomedImage = document.getElementById('zoomedImage');
            zoomedImage.src = mainImage.src;
            new bootstrap.Modal(document.getElementById('imageZoomModal')).show();
        }

        // ✅ NEW: Share product
        function shareProduct() {
            if (navigator.share) {
                navigator.share({
                    title: '{{ $translation->name }}',
                    text: '{{ $translation->short_description }}',
                    url: window.location.href,
                });
            } else {
                // Fallback to clipboard
                navigator.clipboard.writeText(window.location.href).then(() => {
                    showToast('{{ __("Product URL copied to clipboard!") }}', 'success');
                });
            }
        }

        // ✅ NEW: Compare product
        function compareProduct(productId) {
            let compareList = JSON.parse(localStorage.getItem('compareList') || '[]');

            if (compareList.includes(productId)) {
                showToast('{{ __("Product already in compare list") }}', 'info');
                return;
            }

            if (compareList.length >= 3) {
                showToast('{{ __("You can only compare up to 3 products") }}', 'warning');
                return;
            }

            compareList.push(productId);
            localStorage.setItem('compareList', JSON.stringify(compareList));
            showToast('{{ __("Product added to compare list") }}', 'success');
        }

        // ✅ ENHANCED: Toast notifications
        function showToast(message, type = 'info') {
            const toastClass = type === 'success' ? 'bg-success' :
                type === 'error' ? 'bg-danger' :
                    type === 'warning' ? 'bg-warning' : 'bg-info';

            const toast = document.createElement('div');
            toast.className = `toast position-fixed ${toastClass} text-white`;
            toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            toast.innerHTML = `
                <div class="toast-body">
                    <i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'times' : type === 'warning' ? 'exclamation' : 'info'}-circle me-2"></i>
                    ${message}
                </div>
            `;

            document.body.appendChild(toast);

            const bsToast = new bootstrap.Toast(toast);
            bsToast.show();

            toast.addEventListener('hidden.bs.toast', () => {
                toast.remove();
            });
        }

        // ✅ NEW: Update cart count
        function updateCartCount() {
            fetch('{{ route("cart.count") }}')
                .then(response => response.json())
                .then(data => {
                    const badge = document.getElementById('cart-count');
                    if (badge) {
                        badge.textContent = data.count || 0;
                        badge.style.display = data.count > 0 ? 'inline' : 'none';
                    }
                });
        }

        // ✅ NEW: Update wishlist count
        function updateWishlistCount() {
            fetch('{{ route("wishlist.count") }}')
                .then(response => response.json())
                .then(data => {
                    const badge = document.getElementById('wishlist-count');
                    if (badge) {
                        badge.textContent = data.count || 0;
                        badge.style.display = data.count > 0 ? 'inline' : 'none';
                    }
                });
        }

        // ✅ NEW: Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            // Check if product is in wishlist
            fetch(`{{ url('/') }}/{{ app()->getLocale() }}/wishlist/check/{{ $product->id }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if(data.in_wishlist) {
                        const icon = document.querySelector('#wishlistIcon');
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'text-danger');
                    }
                });

            // Update quantity input on change
            document.getElementById('quantity').addEventListener('change', function() {
                let value = parseInt(this.value);
                value = Math.max(1, Math.min(value, maxQuantity));
                this.value = value;
                currentQuantity = value;
            });
        });
    </script>
@endpush