@extends('admin.layouts.app')

@section('title', 'View Product')

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('admin.products.index') }}">{{ __('Products') }}</a>
    </li>
    <li class="breadcrumb-item active">{{ __('View Product') }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ $product->name }}</h1>
        <p class="text-muted mb-0">
            {{ __('SKU') }}: <code>{{ $product->sku }}</code>
            @if($product->brand)
                • {{ $product->brand }}
            @endif
            • <span class="text-success">ID: #{{ $product->id }}</span>
        </p>
    </div>
    <div class="d-flex gap-2">
        <!-- Enhanced Actions Dropdown -->
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <i class="fas fa-cog me-2"></i>
                {{ __('Actions') }}
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="{{ route('admin.products.edit', $product) }}">
                        <i class="fas fa-edit me-2"></i>{{ __('Edit Product') }}
                    </a></li>
                <li><a class="dropdown-item" href="{{ route('admin.products.duplicate', $product) }}">
                        <i class="fas fa-copy me-2"></i>{{ __('Duplicate Product') }}
                    </a></li>
                <li><a class="dropdown-item" href="#" onclick="exportProduct()">
                        <i class="fas fa-download me-2"></i>{{ __('Export Data') }}
                    </a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#" onclick="toggleStatus()">
                        <i class="fas fa-power-off me-2"></i>
                        {{ $product->is_active ? __('Deactivate') : __('Activate') }}
                    </a></li>
                <li><a class="dropdown-item" href="#" onclick="toggleFeatured()">
                        <i class="fas fa-star me-2"></i>
                        {{ $product->is_featured ? __('Unfeature') : __('Feature') }}
                    </a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item text-danger" href="#" onclick="deleteProduct()">
                        <i class="fas fa-trash me-2"></i>{{ __('Delete Product') }}
                    </a></li>
            </ul>
        </div>
        <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-primary-custom">
            <i class="fas fa-edit me-2"></i>
            {{ __('Edit Product') }}
        </a>
    </div>
@endsection

@push('styles')
    <style>
        /* Enhanced Modern Styles */
        .product-hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1.5rem;
            border-radius: 0.75rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
        }

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

        .main-image-container {
            position: relative;
            overflow: hidden;
            border-radius: 0.75rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            background: #f8f9fa;
        }

        .main-image {
            width: 100%;
            height: 450px;
            object-fit: cover;
            transition: all 0.3s ease;
            cursor: zoom-in;
        }

        .main-image:hover {
            transform: scale(1.02);
        }

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

        .main-image-container:hover .image-overlay {
            opacity: 1;
        }

        .overlay-btn {
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border: none;
            padding: 0.5rem;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .overlay-btn:hover {
            background: rgba(0, 0, 0, 0.9);
            transform: scale(1.1);
        }

        .thumbnail-images {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .thumbnail {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 0.5rem;
            border: 3px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .thumbnail:hover,
        .thumbnail.active {
            border-color: #667eea;
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

        .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            border-radius: 2rem;
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }

        .status-indicator.active {
            background: linear-gradient(45deg, #10b981, #059669);
            color: white;
            animation: pulse-success 2s infinite;
        }

        .status-indicator.inactive {
            background: linear-gradient(45deg, #6b7280, #4b5563);
            color: white;
        }

        @keyframes pulse-success {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
            }
            50% {
                box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
            }
        }

        .featured-badge {
            background: linear-gradient(45deg, #f59e0b, #d97706);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.875rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            animation: sparkle 3s infinite;
        }

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

        .price-display {
            font-size: 2.25rem;
            font-weight: 800;
            background: linear-gradient(45deg, #059669, #10b981);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .original-price {
            font-size: 1.5rem;
            text-decoration: line-through;
            color: #d4dbe8;
            font-weight: 500;
        }

        .discount-badge {
            background: linear-gradient(45deg, #dc2626, #b91c1c);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.875rem;
            font-weight: 600;
            animation: pulse-danger 2s infinite;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

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

        .info-card {
            background: white;
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .info-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(45deg, #667eea, #764ba2);
        }

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

        .stock-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            font-weight: 600;
            font-size: 1rem;
            border: 2px solid;
        }

        .stock-indicator.in-stock {
            background: linear-gradient(45deg, #ecfdf5, #d1fae5);
            color: #065f46;
            border-color: #10b981;
        }

        .stock-indicator.low-stock {
            background: linear-gradient(45deg, #fffbeb, #fef3c7);
            color: #92400e;
            border-color: #f59e0b;
            animation: pulse-warning 2s infinite;
        }

        .stock-indicator.out-of-stock {
            background: linear-gradient(45deg, #fef2f2, #fecaca);
            color: #991b1b;
            border-color: #dc2626;
        }

        @keyframes pulse-warning {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
            }
            50% {
                box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
            }
        }

        .category-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .category-badge {
            background: linear-gradient(45deg, #dbeafe, #bfdbfe);
            color: #1e40af;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.875rem;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            border: 2px solid #3b82f6;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .category-badge:hover {
            background: linear-gradient(45deg, #3b82f6, #2563eb);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .translation-tabs {
            display: flex;
            border-bottom: 3px solid #e5e7eb;
            margin-bottom: 2rem;
            overflow-x: auto;
            background: #f8fafc;
            border-radius: 0.75rem 0.75rem 0 0;
            padding: 0.5rem 0.5rem 0;
        }

        .translation-tab {
            display: flex;
            align-items: center;
            padding: 1rem 2rem;
            margin-right: 0.25rem;
            background: #e5e7eb;
            border: none;
            border-radius: 0.5rem 0.5rem 0 0;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            gap: 0.75rem;
            font-weight: 500;
            color: #6b7280;
        }

        .translation-tab.active {
            background: white;
            color: #667eea;
            font-weight: 600;
            transform: translateY(-2px);
            box-shadow: 0 -2px 10px rgba(102, 126, 234, 0.2);
        }

        .translation-tab:hover:not(.active) {
            background: #d1d5db;
            color: #374151;
        }

        .translation-content {
            display: none;
            animation: fadeInUp 0.4s ease;
        }

        .translation-content.active {
            display: block;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        .feature-list li {
            padding: 0.75rem 0;
            padding-left: 2rem;
            position: relative;
            border-bottom: 1px solid #f3f4f6;
            transition: all 0.2s ease;
        }

        .feature-list li:hover {
            background: #f9fafb;
            padding-left: 2.5rem;
        }

        .feature-list li::before {
            content: '✅';
            position: absolute;
            left: 0;
            font-size: 1.1rem;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-3px);
            }
            60% {
                transform: translateY(-2px);
            }
        }

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

        .specification-list li {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid #e5e7eb;
            transition: all 0.2s ease;
        }

        .specification-list li:hover {
            background: #f9fafb;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .specification-list li:last-child {
            border-bottom: none;
        }

        .seo-preview {
            border: 2px solid #e5e7eb;
            border-radius: 0.75rem;
            padding: 1.5rem;
            background: #f8fafc;
            position: relative;
            transition: all 0.3s ease;
        }

        .seo-preview:hover {
            border-color: #667eea;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
        }

        .seo-preview::before {
            content: "🔍 Google Preview";
            position: absolute;
            top: -12px;
            left: 1rem;
            background: #f8fafc;
            padding: 0 0.75rem;
            font-size: 0.875rem;
            color: #667eea;
            font-weight: 600;
        }

        .seo-title {
            color: #1a0dab;
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
            text-decoration: none;
            font-weight: 500;
            cursor: pointer;
        }

        .seo-title:hover {
            text-decoration: underline;
        }

        .seo-url {
            color: #006621;
            font-size: 0.875rem;
            margin-bottom: 0.75rem;
            font-family: monospace;
        }

        .seo-description {
            color: #545454;
            font-size: 0.875rem;
            line-height: 1.5;
        }

        .analytics-mini-widget {
            background: white;
            border-radius: 0.75rem;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            border: 1px solid #e5e7eb;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .analytics-mini-widget::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
        }

        .analytics-mini-widget:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .analytics-number {
            font-size: 2rem;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 0.5rem;
            display: block;
        }

        .analytics-label {
            color: #6b7280;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .quick-actions-fab {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
        }

        .fab-main {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
        }

        .fab-main:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
        }

        .fab-actions {
            position: absolute;
            bottom: 70px;
            right: 0;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .fab-actions.show {
            opacity: 1;
            visibility: visible;
        }

        .fab-action {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .fab-edit {
            background: linear-gradient(45deg, #3b82f6, #2563eb);
        }

        .fab-duplicate {
            background: linear-gradient(45deg, #8b5cf6, #7c3aed);
        }

        .fab-export {
            background: linear-gradient(45deg, #10b981, #059669);
        }

        .fab-delete {
            background: linear-gradient(45deg, #dc2626, #b91c1c);
        }

        .fab-action:hover {
            transform: scale(1.1);
        }

        .loading-shimmer {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .product-hero {
                padding: 1rem;
                margin-bottom: 1rem;
            }

            .main-image {
                height: 300px;
            }

            .price-display {
                font-size: 1.75rem;
            }

            .translation-tabs {
                padding: 0.25rem;
            }

            .translation-tab {
                padding: 0.75rem 1rem;
                font-size: 0.875rem;
            }

            .fab-main {
                width: 50px;
                height: 50px;
                font-size: 1.25rem;
            }

            .fab-action {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Product Hero Section -->
    <div class="product-hero">
        <div class="row align-items-center">
            <div class="col-md-8">
                <div class="d-flex align-items-center gap-3 mb-2">
                    <div class="status-indicator {{ $product->is_active ? 'active' : 'inactive' }}">
                        <i class="fas {{ $product->is_active ? 'fa-check-circle' : 'fa-times-circle' }}"></i>
                        {{ $product->is_active ? __('Active') : __('Inactive') }}
                    </div>
                    @if($product->is_featured)
                        <div class="featured-badge">
                            <i class="fas fa-star"></i>
                            {{ __('Featured') }}
                        </div>
                    @endif
                </div>
                <h1 class="h2 mb-2">{{ $product->name }}</h1>
                <div class="d-flex flex-wrap gap-3 text-white-50">
                    <span><i class="fas fa-barcode me-1"></i>{{ $product->sku }}</span>
                    @if($product->brand)
                        <span><i class="fas fa-tag me-1"></i>{{ $product->brand }}</span>
                    @endif
                    <span><i class="fas fa-calendar me-1"></i>{{ $product->created_at->format('M d, Y') }}</span>
                </div>
            </div>
            <div class="col-md-4 text-md-end mt-3 mt-md-0">
                @php
                    $basePrice = $product->sale_price ?: $product->price;
//                    $vatAmount = $basePrice * .15;
                    $vatAmount = $basePrice * ($product->tax_rate/100);
                    $customerPrice = $basePrice + $vatAmount;
                @endphp


                <div class="d-flex flex-column align-items-md-end gap-2">
                    <div class="price-display display-4 fw-bold">
                        {{__('Customer Price')}}: ${{number_format($customerPrice,0)}}
                    </div>
                    <div class=" display-6 fw-bold text-muted ">
                        {{--                        @if($product->sale_price)--}}
                        {{--                            ${{ number_format($product->sale_price, 2) }}--}}
                        {{--                        @else--}}
                        {{--                            ${{ number_format($product->price, 2) }}--}}
                        {{--                        @endif--}}
                        {{__('Base Price')}}: ${{number_format($basePrice,0)}}
                    </div>
                    @if($product->sale_price)
                        <div class="d-flex align-items-center gap-2">
                            <span class="original-price">${{ number_format($product->price, 2) }}</span>
                            <span class="discount-badge">
                                <i class="fas fa-fire"></i>
                                -{{ round((($product->price - $product->sale_price) / $product->price) * 100) }}%
                            </span>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Product Images -->
        <div class="col-lg-5">
            <div class="product-image-gallery">
                @if($product->images->count() > 0)
                    <div class="main-image-container">
                        <img src="{{ asset('storage/' . $product->images->first()->image_path) }}"
                             alt="{{ $product->images->first()->alt_text }}"
                             class="main-image"
                             id="mainImage">

                        <div class="image-overlay">
                            <button class="overlay-btn" onclick="zoomImage()" title="{{ __('Zoom') }}">
                                <i class="fas fa-search-plus"></i>
                            </button>
                            <button class="overlay-btn" onclick="fullscreenImage()" title="{{ __('Fullscreen') }}">
                                <i class="fas fa-expand"></i>
                            </button>
                            <button class="overlay-btn" onclick="downloadImage()" title="{{ __('Download') }}">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>

                    @if($product->images->count() > 1)
                        <div class="thumbnail-images">
                            @foreach($product->images as $index => $image)
                                <img src="{{ asset('storage/' . $image->image_path) }}"
                                     alt="{{ $image->alt_text }}"
                                     class="thumbnail {{ $index === 0 ? 'active' : '' }}"
                                     onclick="changeMainImage('{{ asset('storage/' . $image->image_path) }}', this)">
                            @endforeach
                        </div>
                    @endif
                @else
                    <div class="text-center py-5"
                         style="background: #f8f9fa; border-radius: 0.75rem; border: 2px dashed #dee2e6;">
                        <i class="fas fa-image fa-4x text-muted mb-3"></i>
                        <h5 class="text-muted">{{ __('No images uploaded') }}</h5>
                        <p class="text-muted mb-3">{{ __('Add images to showcase your product') }}</p>
                        <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-outline-primary">
                            <i class="fas fa-plus me-2"></i>{{ __('Add Images') }}
                        </a>
                    </div>
                @endif
            </div>
        </div>

        <!-- Product Information -->
        <div class="col-lg-7">
            <!-- Stock and Categories Info -->
            <div class="info-card">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-info-circle text-primary me-2"></i>
                    {{ __('Product Overview') }}
                </h5>

                <div class="row align-items-center mb-4">
                    <div class="col-md-6">
                        @if($product->track_inventory)
                            @if($product->quantity > $product->min_quantity)
                                <div class="stock-indicator in-stock">
                                    <i class="fas fa-check-circle"></i>
                                    <div>
                                        <div>{{ __('In Stock') }}</div>
                                        <small>{{ $product->quantity }} {{ __('available') }}</small>
                                    </div>
                                </div>
                            @elseif($product->quantity > 0)
                                <div class="stock-indicator low-stock">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    <div>
                                        <div>{{ __('Low Stock') }}</div>
                                        <small>{{ $product->quantity }} {{ __('remaining') }}</small>
                                    </div>
                                </div>
                            @else
                                <div class="stock-indicator out-of-stock">
                                    <i class="fas fa-times-circle"></i>
                                    <div>
                                        <div>{{ __('Out of Stock') }}</div>
                                        <small>{{ __('Restock needed') }}</small>
                                    </div>
                                </div>
                            @endif
                        @else
                            <div class="stock-indicator in-stock">
                                <i class="fas fa-infinity"></i>
                                <div>
                                    <div>{{ __('Stock not tracked') }}</div>
                                    <small>{{ __('Unlimited availability') }}</small>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="col-md-6 mt-3 mt-md-0">
                        @if($product->categories->count() > 0)
                            <div>
                                <strong class="d-block mb-2">{{ __('Categories') }}:</strong>
                                <div class="category-badges">
                                    @foreach($product->categories as $category)
                                        <a href="{{ route('admin.categories.show', $category->id) }}"
                                           class="category-badge">
                                            <i class="fas fa-tag"></i>
                                            {{ $category->name }}
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Product Details Grid -->
                <div class="row g-3">
                    @if($product->brand)
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded">
                                <strong class="d-block text-muted">{{ __('Brand') }}</strong>
                                <span class="fs-6">{{ $product->brand }}</span>
                            </div>
                        </div>
                    @endif
                    @if($product->model)
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded">
                                <strong class="d-block text-muted">{{ __('Model') }}</strong>
                                <span class="fs-6">{{ $product->model }}</span>
                            </div>
                        </div>
                    @endif
                    @if($product->weight)
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded">
                                <strong class="d-block text-muted">{{ __('Weight') }}</strong>
                                <span class="fs-6">{{ $product->weight }}kg</span>
                            </div>
                        </div>
                    @endif
                    <div class="col-md-6">
                        <div class="p-3 bg-light rounded">
                            <strong class="d-block text-muted">{{ __('Min Quantity') }}</strong>
                            <span class="fs-6">{{ $product->min_quantity ?? 'Not set' }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mini Analytics -->
            <div class="row mb-4">
                <div class="col-6 col-lg-3 mb-3">
                    <div class="analytics-mini-widget">
                        <span class="analytics-number" id="viewsCount">{{ $product->views_count ?? 0 }}</span>
                        <span class="analytics-label">{{ __('Views') }}</span>
                    </div>
                </div>
                <div class="col-6 col-lg-3 mb-3">
                    <div class="analytics-mini-widget">
                        <span class="analytics-number">0</span>
                        <span class="analytics-label">{{ __('Orders') }}</span>
                    </div>
                </div>
                <div class="col-6 col-lg-3 mb-3">
                    <div class="analytics-mini-widget">
                        <span class="analytics-number">0</span>
                        <span class="analytics-label">{{ __('Wishlist') }}</span>
                    </div>
                </div>
                <div class="col-6 col-lg-3 mb-3">
                    <div class="analytics-mini-widget">
                        <span class="analytics-number">
                            {{ $product->translations->count() }}/{{ count(config('laravellocalization.supportedLocales')) }}
                        </span>
                        <span class="analytics-label">{{ __('Translations') }}</span>
                    </div>
                </div>
            </div>

            <!-- Translation Tabs -->
            <div class="translation-tabs">
                @foreach(config('laravellocalization.supportedLocales') as $localeCode => $locale)
                    @php
                        $translation = $product->translations->where('locale', $localeCode)->first();
                    @endphp
                    <div class="translation-tab {{ $loop->first ? 'active' : '' }}"
                         onclick="showTranslation('{{ $localeCode }}')">
                        <i class="fas fa-flag"></i>
                        {{ $locale['native'] }}
                        @if($translation)
                            <i class="fas fa-check-circle text-success"></i>
                        @else
                            <i class="fas fa-exclamation-circle text-warning"></i>
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- Translation Content -->
            @foreach(config('laravellocalization.supportedLocales') as $localeCode => $locale)
                @php
                    $translation = $product->translations->where('locale', $localeCode)->first();
                @endphp
                <div class="translation-content {{ $loop->first ? 'active' : '' }}" id="translation-{{ $localeCode }}">
                    @if($translation)
                        <!-- Short Description -->
                        @if($translation->short_description)
                            <div class="info-card">
                                <h5 class="fw-bold mb-3">
                                    <i class="fas fa-align-left text-primary me-2"></i>
                                    {{ __('Short Description') }}
                                </h5>
                                <p class="mb-0">{{ $translation->short_description }}</p>
                            </div>
                        @endif

                        <!-- Full Description -->
                        @if($translation->description)
                            <div class="info-card">
                                <h5 class="fw-bold mb-3">
                                    <i class="fas fa-file-alt text-primary me-2"></i>
                                    {{ __('Description') }}
                                </h5>
                                <div class="content-text">{!! nl2br(e($translation->description)) !!}</div>
                            </div>
                        @endif

                        <!-- Features -->
                        @if($translation->features)
                            <div class="info-card">
                                <h5 class="fw-bold mb-3">
                                    <i class="fas fa-star text-primary me-2"></i>
                                    {{ __('Features') }}
                                </h5>
                                <ul class="feature-list">
                                    @foreach(explode("\n", $translation->features) as $feature)
                                        @if(trim($feature))
                                            <li>{{ trim(str_replace(['•', '-', '*'], '', $feature)) }}</li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <!-- Specifications -->
                        @if($translation->specifications)
                            <div class="info-card">
                                <h5 class="fw-bold mb-3">
                                    <i class="fas fa-cogs text-primary me-2"></i>
                                    {{ __('Specifications') }}
                                </h5>
                                <ul class="specification-list">
                                    @foreach(explode("\n", $translation->specifications) as $spec)
                                        @if(trim($spec) && strpos($spec, ':') !== false)
                                            @php
                                                [$key, $value] = explode(':', $spec, 2);
                                            @endphp
                                            <li>
                                                <strong>{{ trim($key) }}:</strong>
                                                <span>{{ trim($value) }}</span>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <!-- SEO Preview -->
                        @if($translation->meta_title || $translation->meta_description)
                            <div class="info-card">
                                <h5 class="fw-bold mb-3">
                                    <i class="fas fa-search text-primary me-2"></i>
                                    {{ __('SEO Preview') }}
                                </h5>
                                <div class="seo-preview">
                                    <div class="seo-title">
                                        {{ $translation->meta_title ?: $translation->name }}
                                    </div>
                                    <div class="seo-url">
                                        {{ url('/products/' . $translation->slug) }}
                                    </div>
                                    <div class="seo-description">
                                        {{ $translation->meta_description ?: ($translation->short_description ?: Str::limit(strip_tags($translation->description), 160)) }}
                                    </div>
                                </div>

                                @if($translation->meta_keywords)
                                    <div class="mt-3">
                                        <strong>{{ __('Keywords') }}:</strong>
                                        <div class="mt-2">
                                            @foreach(explode(',', $translation->meta_keywords) as $keyword)
                                                <span
                                                    class="badge bg-light text-dark me-1 mb-1">{{ trim($keyword) }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif
                    @else
                        <div class="info-card text-center py-5">
                            <i class="fas fa-language fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">{{ __('Translation Not Available') }}</h5>
                            <p class="text-muted mb-3">{{ __('This product has not been translated to') }} {{ $locale['native'] }}</p>
                            <a href="{{ route('admin.products.edit', $product) }}" class="btn btn-outline-primary">
                                <i class="fas fa-plus me-2"></i>
                                {{ __('Add Translation') }}
                            </a>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    <!-- System Information -->
    <div class="row mt-5">
        <div class="col-lg-4">
            <div class="info-card">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-server text-info me-2"></i>
                    {{ __('System Information') }}
                </h5>
                <div class="row g-3">
                    <div class="col-12">
                        <div class="d-flex justify-content-between">
                            <strong>{{ __('Product ID') }}:</strong>
                            <span class="text-muted">#{{ $product->id }}</span>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex justify-content-between">
                            <strong>{{ __('SKU') }}:</strong>
                            <code>{{ $product->sku }}</code>
                        </div>
                    </div>
                    @if($product->code)
                        <div class="col-12">
                            <div class="d-flex justify-content-between">
                                <strong>{{ __('Product Code') }}:</strong>
                                <code>{{ $product->code }}</code>
                            </div>
                        </div>
                    @endif
                    <div class="col-12">
                        <div class="d-flex justify-content-between">
                            <strong>{{ __('Created At') }}:</strong>
                            <span class="text-muted">{{ $product->created_at->format('M d, Y H:i') }}</span>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex justify-content-between">
                            <strong>{{ __('Last Updated') }}:</strong>
                            <span class="text-muted">{{ $product->updated_at->format('M d, Y H:i') }}</span>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex justify-content-between">
                            <strong>{{ __('Default Locale') }}:</strong>
                            <span class="badge bg-primary">{{ strtoupper($product->default_locale ?? 'ar') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="info-card">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-bolt text-warning me-2"></i>
                    {{ __('Quick Actions') }}
                </h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <button class="btn btn-outline-primary w-100" onclick="quickEditStock()">
                            <i class="fas fa-boxes me-2"></i>
                            {{ __('Update Stock') }}
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-outline-info w-100" onclick="quickEditPrice()">
                            <i class="fas fa-dollar-sign me-2"></i>
                            {{ __('Update Price') }}
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-outline-{{ $product->is_active ? 'warning' : 'success' }} w-100"
                                onclick="toggleStatus()">
                            <i class="fas fa-power-off me-2"></i>
                            {{ $product->is_active ? __('Deactivate') : __('Activate') }}
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-outline-{{ $product->is_featured ? 'secondary' : 'warning' }} w-100"
                                onclick="toggleFeatured()">
                            <i class="fas fa-star me-2"></i>
                            {{ $product->is_featured ? __('Unfeature') : __('Feature') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals (existing ones) -->
    <!-- Stock Update Modal -->
    <div class="modal fade" id="stockModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Update Stock') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="stockForm">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">{{ __('Current Stock') }}</label>
                            <input type="text" class="form-control" value="{{ $product->quantity }}" readonly>
                        </div>

                        <div class="mb-3">
                            <label for="stock_action" class="form-label">{{ __('Action') }}</label>
                            <select class="form-select" id="stock_action" name="action" required>
                                <option value="set">{{ __('Set to specific amount') }}</option>
                                <option value="increase">{{ __('Increase by amount') }}</option>
                                <option value="decrease">{{ __('Decrease by amount') }}</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="stock_quantity" class="form-label">{{ __('Quantity') }}</label>
                            <input type="number" class="form-control" id="stock_quantity" name="quantity" min="0"
                                   required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update Stock') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Price Update Modal -->
    <div class="modal fade" id="priceModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Update Price') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="priceForm">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="update_price" class="form-label">{{ __('Regular Price') }}</label>
                                    <input type="number" class="form-control" id="update_price" name="price"
                                           value="{{ $product->price }}" step="0.01" min="0" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="update_sale_price" class="form-label">{{ __('Sale Price') }}</label>
                                    <input type="number" class="form-control" id="update_sale_price" name="sale_price"
                                           value="{{ $product->sale_price }}" step="0.01" min="0">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Update Price') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 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">{{ __('Product Image') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center p-1">
                    <img src="" id="zoomedImage" class="img-fluid" style="max-height: 80vh;">
                </div>
            </div>
        </div>
    </div>

    <!-- Floating Action Button -->
    <div class="quick-actions-fab">
        <div class="fab-actions" id="fabActions">
            <button class="fab-action fab-edit"
                    onclick="window.location.href='{{ route('admin.products.edit', $product) }}'"
                    title="{{ __('Edit Product') }}">
                <i class="fas fa-edit"></i>
            </button>
            <button class="fab-action fab-duplicate" onclick="duplicateProduct()" title="{{ __('Duplicate Product') }}">
                <i class="fas fa-copy"></i>
            </button>
            <button class="fab-action fab-export" onclick="exportProduct()" title="{{ __('Export Data') }}">
                <i class="fas fa-download"></i>
            </button>
            <button class="fab-action fab-delete" onclick="deleteProduct()" title="{{ __('Delete Product') }}">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        <button class="fab-main" onclick="toggleFab()" id="fabMain">
            <i class="fas fa-plus" id="fabIcon"></i>
        </button>
    </div>
@endsection

@push('scripts')
    <script>
        // Enhanced JavaScript functionality
        let fabOpen = false;

        // Change main image
        function changeMainImage(imageSrc, thumbnail) {
            document.getElementById('mainImage').src = imageSrc;

            // Update thumbnail active state
            document.querySelectorAll('.thumbnail').forEach(thumb => {
                thumb.classList.remove('active');
            });
            thumbnail.classList.add('active');
        }

        // Show translation content
        function showTranslation(locale) {
            // Update tabs
            document.querySelectorAll('.translation-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            event.target.classList.add('active');

            // Update content
            document.querySelectorAll('.translation-content').forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById('translation-' + locale).classList.add('active');
        }

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

        function fullscreenImage() {
            const img = document.getElementById('mainImage');
            if (img.requestFullscreen) {
                img.requestFullscreen();
            } else if (img.webkitRequestFullscreen) {
                img.webkitRequestFullscreen();
            } else if (img.msRequestFullscreen) {
                img.msRequestFullscreen();
            }
        }

        function downloadImage() {
            const img = document.getElementById('mainImage');
            const a = document.createElement('a');
            a.href = img.src;
            a.download = 'product-{{ $product->sku }}-image.jpg';
            a.click();
        }

        // Toggle FAB
        function toggleFab() {
            const fabActions = document.getElementById('fabActions');
            const fabIcon = document.getElementById('fabIcon');

            fabOpen = !fabOpen;

            if (fabOpen) {
                fabActions.classList.add('show');
                fabIcon.className = 'fas fa-times';
            } else {
                fabActions.classList.remove('show');
                fabIcon.className = 'fas fa-plus';
            }
        }

        // Product actions (using existing routes)
        function toggleStatus() {
            if (confirm('{{ __("Are you sure you want to change the product status?") }}')) {
                fetch(`{{ route('admin.products.toggle-status', $product) }}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showNotification(data.message, 'success');
                            setTimeout(() => location.reload(), 1000);
                        } else {
                            showNotification('{{ __("Error updating status") }}', 'error');
                        }
                    })
                    .catch(error => {
                        showNotification('{{ __("Error updating status") }}', 'error');
                    });
            }
        }

        function toggleFeatured() {
            if (confirm('{{ __("Are you sure you want to change the featured status?") }}')) {
                fetch(`{{ route('admin.products.toggle-featured', $product) }}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showNotification(data.message, 'success');
                            setTimeout(() => location.reload(), 1000);
                        } else {
                            showNotification('{{ __("Error updating featured status") }}', 'error');
                        }
                    })
                    .catch(error => {
                        showNotification('{{ __("Error updating featured status") }}', 'error');
                    });
            }
        }

        function deleteProduct() {
            if (confirm('{{ __("Are you sure you want to delete this product? This action cannot be undone.") }}')) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `{{ route('admin.products.destroy', $product) }}`;
                form.innerHTML = `
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="_method" value="DELETE">
                `;
                document.body.appendChild(form);
                form.submit();
            }
        }

        function duplicateProduct() {
            if (confirm('{{ __("Do you want to duplicate this product?") }}')) {
                window.location.href = '{{ route('admin.products.duplicate', $product) }}';
            }
        }

        function exportProduct() {
            // Using existing route
            window.open('{{ route('admin.products.data', $product) }}', '_blank');
        }

        // Quick edit functions
        function quickEditStock() {
            new bootstrap.Modal(document.getElementById('stockModal')).show();
        }

        function quickEditPrice() {
            new bootstrap.Modal(document.getElementById('priceModal')).show();
        }

        // Handle form submissions (using existing routes)
        document.getElementById('stockForm').addEventListener('submit', function (e) {
            e.preventDefault();
            const formData = new FormData(this);

            fetch(`{{ route('admin.products.update-stock', $product) }}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        bootstrap.Modal.getInstance(document.getElementById('stockModal')).hide();
                        showNotification(data.message, 'success');
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        showNotification(data.message || '{{ __("Error updating stock") }}', 'error');
                    }
                })
                .catch(error => {
                    showNotification('{{ __("Error updating stock") }}', 'error');
                });
        });

        document.getElementById('priceForm').addEventListener('submit', function (e) {
            e.preventDefault();
            const formData = new FormData(this);

            fetch(`{{ route('admin.products.quick-edit', $product) }}`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        bootstrap.Modal.getInstance(document.getElementById('priceModal')).hide();
                        showNotification(data.message, 'success');
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        showNotification('{{ __("Error updating price") }}', 'error');
                    }
                })
                .catch(error => {
                    showNotification('{{ __("Error updating price") }}', 'error');
                });
        });

        // Enhanced notification system
        function showNotification(message, type) {
            const alertClass = type === 'success' ? 'alert-success' :
                type === 'warning' ? 'alert-warning' : 'alert-danger';
            const icon = type === 'success' ? 'fa-check-circle' :
                type === 'warning' ? 'fa-exclamation-triangle' : 'fa-exclamation-circle';

            const alert = document.createElement('div');
            alert.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
            alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);';
            alert.innerHTML = `
                <i class="fas ${icon} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;

            document.body.appendChild(alert);

            // Auto-remove after 5 seconds
            setTimeout(() => {
                if (alert.parentNode) {
                    alert.remove();
                }
            }, 5000);
        }

        // Enhanced page interactions
        document.addEventListener('DOMContentLoaded', function () {
            // Animate cards on scroll
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            });

            // Apply initial hidden state and observe
            document.querySelectorAll('.info-card').forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                observer.observe(card);
            });

            // Close FAB when clicking outside
            document.addEventListener('click', function (e) {
                if (fabOpen && !e.target.closest('.quick-actions-fab')) {
                    toggleFab();
                }
            });

            // Real-time view counter update (example)
            setInterval(function () {
                const viewsElement = document.getElementById('viewsCount');
                if (viewsElement) {
                    // You could fetch real-time data here using your existing routes
                    // fetch(`{{ route('admin.products.data', $product) }}`).then(...)
                }
            }, 30000); // Update every 30 seconds
        });

        // Keyboard shortcuts
        document.addEventListener('keydown', function (e) {
            if (e.ctrlKey || e.metaKey) {
                switch (e.key) {
                    case 'e':
                        e.preventDefault();
                        window.location.href = '{{ route('admin.products.edit', $product) }}';
                        break;
                    case 'd':
                        e.preventDefault();
                        duplicateProduct();
                        break;
                }
            }
        });
    </script>
@endpush