<div x-data="{ activeTab: 'overview' }">
    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
        {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
        {{ session('error') }}
    </div>
    @endif

    {{-- Header Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <div class="flex items-center gap-3 mb-2">
                    <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ $product->name_ar }}</h1>
                    @if($product->is_active)
                        <span class="px-2.5 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-700">{{ __('نشط') }}</span>
                    @else
                        <span class="px-2.5 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-700">{{ __('غير نشط') }}</span>
                    @endif
                </div>
                @if($product->name)
                    <p class="text-sm text-gray-500" dir="ltr">{{ $product->name }}</p>
                @endif
                <div class="flex items-center gap-4 mt-2 text-sm text-gray-500">
                    @if($product->sku)
                        <span class="font-mono" dir="ltr">{{ __('SKU') }}: {{ $product->sku }}</span>
                    @endif
                    @if($product->barcode)
                        <span class="font-mono" dir="ltr">{{ __('باركود') }}: {{ $product->barcode }}</span>
                    @endif
                    @if($product->type)
                        <span>{{ $product->type->label() }}</span>
                    @endif
                </div>
            </div>
            <div class="flex items-center gap-2">
                @can('inventory.update')
                    <a href="{{ route('inventory.products.edit', $product) }}" wire:navigate
                       class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition-colors">
                        {{ __('تعديل') }}
                    </a>
                @endcan
                <a href="{{ route('inventory.products') }}" wire:navigate
                   class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors">
                    {{ __('العودة للقائمة') }}
                </a>
            </div>
        </div>
    </div>

    {{-- KPI Row --}}
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
        {{-- Total Stock --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('إجمالي المخزون') }}</p>
            <p class="text-xl font-bold text-gray-800">{{ number_format($totalOnHand) }}</p>
        </div>
        {{-- Reserved --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('الكمية المحجوزة') }}</p>
            <p class="text-xl font-bold text-amber-600">{{ number_format($totalReserved) }}</p>
        </div>
        {{-- Available --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('الكمية المتاحة') }}</p>
            <p class="text-xl font-bold text-green-600">{{ number_format($totalAvailable) }}</p>
        </div>
        {{-- Unit Cost --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('سعر التكلفة') }}</p>
            <p class="text-xl font-bold text-gray-800 font-mono" dir="ltr">{{ number_format($product->cost_price / 100, 2) }} <span class="text-xs text-gray-500">{{ __('ج.م') }}</span></p>
        </div>
        {{-- Selling Price --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('سعر البيع') }}</p>
            <p class="text-xl font-bold text-gray-800 font-mono" dir="ltr">{{ number_format($product->selling_price / 100, 2) }} <span class="text-xs text-gray-500">{{ __('ج.م') }}</span></p>
        </div>
        {{-- Profit Margin --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <p class="text-xs font-medium text-gray-500 mb-1">{{ __('هامش الربح') }}</p>
            <p class="text-xl font-bold {{ $margin > 0 ? 'text-green-600' : 'text-red-600' }}">{{ $margin }}%</p>
        </div>
    </div>

    {{-- Tabs --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        {{-- Tab Navigation --}}
        <div class="border-b border-gray-200">
            <nav class="flex gap-0 -mb-px">
                <button @click="activeTab = 'overview'"
                        :class="activeTab === 'overview' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">
                    {{ __('نظرة عامة') }}
                </button>
                <button @click="activeTab = 'stock'"
                        :class="activeTab === 'stock' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">
                    {{ __('المخزون') }}
                </button>
                <button @click="activeTab = 'movements'"
                        :class="activeTab === 'movements' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">
                    {{ __('الحركات') }}
                </button>
                <button @click="activeTab = 'sales'"
                        :class="activeTab === 'sales' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">
                    {{ __('المبيعات') }}
                    @if($salesReceipts->count() > 0)
                    <span class="ms-1 px-1.5 py-0.5 text-[10px] rounded-full bg-blue-100 text-blue-700">{{ $salesReceipts->count() }}</span>
                    @endif
                </button>
                <button @click="activeTab = 'analytics'"
                        :class="activeTab === 'analytics' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 text-sm font-medium border-b-2 transition-colors">
                    {{ __('التحليلات') }}
                </button>
            </nav>
        </div>

        {{-- Tab Content --}}
        <div class="p-6">

            {{-- Overview Tab --}}
            <div x-show="activeTab === 'overview'" x-cloak>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {{-- Product Info Card --}}
                    <div class="border border-gray-200 rounded-lg p-5">
                        <h3 class="text-sm font-semibold text-gray-500 mb-4">{{ __('معلومات المنتج') }}</h3>
                        <dl class="space-y-3 text-sm">
                            @if($product->description_ar)
                            <div>
                                <dt class="font-medium text-gray-500">{{ __('الوصف') }}</dt>
                                <dd class="text-gray-800 mt-1">{{ $product->description_ar }}</dd>
                            </div>
                            @endif
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('التصنيف') }}</dt>
                                <dd class="text-gray-800">{{ $product->category?->name_ar ?? __('بدون تصنيف') }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('النوع') }}</dt>
                                <dd class="text-gray-800">{{ $product->type?->label() ?? '-' }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('الوحدة') }}</dt>
                                <dd class="text-gray-800">{{ $product->unit ?? '-' }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('الفرع') }}</dt>
                                <dd class="text-gray-800">{{ $product->branch?->name_ar ?? __('جميع الفروع') }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('تتبع المخزون') }}</dt>
                                <dd>
                                    @if($product->track_inventory)
                                        <span class="text-green-600">{{ __('نعم') }}</span>
                                    @else
                                        <span class="text-gray-400">{{ __('لا') }}</span>
                                    @endif
                                </dd>
                            </div>
                            @if($product->track_inventory)
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('حد إعادة الطلب') }}</dt>
                                <dd class="text-gray-800">{{ $product->min_stock_level ?? '-' }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('الحد الأقصى') }}</dt>
                                <dd class="text-gray-800">{{ $product->max_stock_level ?? '-' }}</dd>
                            </div>
                            @endif
                            @if($product->weight_grams)
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('الوزن') }}</dt>
                                <dd class="text-gray-800" dir="ltr">{{ $product->weight_grams }} {{ __('جم') }}</dd>
                            </div>
                            @endif
                        </dl>
                    </div>

                    {{-- Pricing Card --}}
                    <div class="border border-gray-200 rounded-lg p-5">
                        <h3 class="text-sm font-semibold text-gray-500 mb-4">{{ __('التسعير') }}</h3>
                        <dl class="space-y-3 text-sm">
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('سعر التكلفة') }}</dt>
                                <dd class="text-gray-800 font-mono" dir="ltr">{{ number_format($product->cost_price / 100, 2) }} {{ __('ج.م') }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('سعر البيع') }}</dt>
                                <dd class="text-gray-800 font-mono" dir="ltr">{{ number_format($product->selling_price / 100, 2) }} {{ __('ج.م') }}</dd>
                            </div>
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('هامش الربح') }}</dt>
                                <dd class="font-bold {{ $margin > 0 ? 'text-green-600' : 'text-red-600' }}">{{ $margin }}%</dd>
                            </div>
                            @if($product->selling_price > 0 && $product->cost_price > 0)
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('الربح لكل وحدة') }}</dt>
                                <dd class="text-gray-800 font-mono" dir="ltr">{{ number_format(($product->selling_price - $product->cost_price) / 100, 2) }} {{ __('ج.م') }}</dd>
                            </div>
                            @endif
                            @if($product->tax_rate)
                            <div class="flex justify-between">
                                <dt class="font-medium text-gray-500">{{ __('نسبة الضريبة') }}</dt>
                                <dd class="text-gray-800">{{ $product->tax_rate }}%</dd>
                            </div>
                            @endif
                        </dl>

                        {{-- Inventory Value --}}
                        @if($product->track_inventory && $totalOnHand > 0)
                        <div class="mt-5 pt-4 border-t border-gray-200">
                            <h4 class="text-xs font-medium text-gray-500 mb-2">{{ __('قيمة المخزون') }}</h4>
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">{{ __('بسعر التكلفة') }}</span>
                                <span class="font-mono font-bold text-gray-800" dir="ltr">{{ number_format(($product->cost_price * $totalOnHand) / 100, 2) }} {{ __('ج.م') }}</span>
                            </div>
                            <div class="flex justify-between text-sm mt-1">
                                <span class="text-gray-600">{{ __('بسعر البيع') }}</span>
                                <span class="font-mono font-bold text-gray-800" dir="ltr">{{ number_format(($product->selling_price * $totalOnHand) / 100, 2) }} {{ __('ج.م') }}</span>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Stock Tab --}}
            <div x-show="activeTab === 'stock'" x-cloak>
                @if($levels->count() > 0)
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-gray-50 border-b border-gray-200">
                                <tr>
                                    <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('المستودع') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الكمية المتوفرة') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('المحجوز') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('المتاح') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الحالة') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('آخر حركة') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($levels as $level)
                                <tr>
                                    <td class="px-4 py-3 font-medium text-gray-800">
                                        {{ $level->warehouse?->name_ar ?? __('مستودع محذوف') }}
                                    </td>
                                    <td class="px-4 py-3 text-center text-gray-700 font-mono">{{ number_format($level->quantity_on_hand) }}</td>
                                    <td class="px-4 py-3 text-center text-amber-600 font-mono">{{ number_format($level->quantity_reserved) }}</td>
                                    <td class="px-4 py-3 text-center text-green-600 font-mono">{{ number_format($level->quantity_available) }}</td>
                                    <td class="px-4 py-3 text-center">
                                        @if($product->min_stock_level && $level->quantity_on_hand <= $product->min_stock_level)
                                            <span class="px-2 py-0.5 text-xs rounded-full bg-red-100 text-red-700">{{ __('منخفض') }}</span>
                                        @elseif($product->max_stock_level && $level->quantity_on_hand >= $product->max_stock_level)
                                            <span class="px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700">{{ __('مرتفع') }}</span>
                                        @else
                                            <span class="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">{{ __('طبيعي') }}</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-center text-xs text-gray-500">
                                        {{ $level->last_movement_at?->diffForHumans() ?? '-' }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="bg-gray-50 border-t border-gray-200">
                                <tr class="font-bold">
                                    <td class="px-4 py-3 text-gray-700">{{ __('الإجمالي') }}</td>
                                    <td class="px-4 py-3 text-center text-gray-700 font-mono">{{ number_format($totalOnHand) }}</td>
                                    <td class="px-4 py-3 text-center text-amber-600 font-mono">{{ number_format($totalReserved) }}</td>
                                    <td class="px-4 py-3 text-center text-green-600 font-mono">{{ number_format($totalAvailable) }}</td>
                                    <td class="px-4 py-3"></td>
                                    <td class="px-4 py-3"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @else
                    <div class="text-center py-12">
                        <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                        </svg>
                        <p class="mt-3 text-sm text-gray-500">{{ __('لا يوجد مخزون مسجل لهذا المنتج') }}</p>
                    </div>
                @endif
            </div>

            {{-- Movements Tab --}}
            <div x-show="activeTab === 'movements'" x-cloak>
                @if($movements->count() > 0)
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-gray-50 border-b border-gray-200">
                                <tr>
                                    <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('التاريخ') }}</th>
                                    <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('النوع') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الاتجاه') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الكمية') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('قبل') }} &rarr; {{ __('بعد') }}</th>
                                    <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('المستودع') }}</th>
                                    <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('السبب') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($movements as $movement)
                                <tr>
                                    <td class="px-4 py-3 text-xs text-gray-500 whitespace-nowrap" dir="ltr">
                                        {{ $movement->created_at->format('Y-m-d H:i') }}
                                    </td>
                                    <td class="px-4 py-3 text-gray-700">
                                        {{ $movement->movement_type->label() }}
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        @if($movement->direction === \App\Domain\Inventory\Enums\MovementDirection::In)
                                            <span class="px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-700">{{ __('وارد') }}</span>
                                        @else
                                            <span class="px-2 py-0.5 text-xs rounded-full bg-red-100 text-red-700">{{ __('صادر') }}</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-center font-mono font-medium text-gray-800">
                                        {{ number_format($movement->quantity) }}
                                    </td>
                                    <td class="px-4 py-3 text-center font-mono text-xs text-gray-500" dir="ltr">
                                        {{ number_format($movement->quantity_before) }} &rarr; {{ number_format($movement->quantity_after) }}
                                    </td>
                                    <td class="px-4 py-3 text-gray-600">
                                        {{ $movement->warehouse?->name_ar ?? '-' }}
                                    </td>
                                    <td class="px-4 py-3 text-gray-500 text-xs max-w-[200px] truncate">
                                        {{ $movement->reason ?? '-' }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-12">
                        <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
                        </svg>
                        <p class="mt-3 text-sm text-gray-500">{{ __('لا توجد حركات مسجلة لهذا المنتج') }}</p>
                    </div>
                @endif
            </div>

            {{-- Sales/Receipts Tab --}}
            <div x-show="activeTab === 'sales'" x-cloak>
                @if($salesReceipts->count() > 0)
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-gray-50 border-b border-gray-200">
                                <tr>
                                    <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('رقم الإيصال') }}</th>
                                    <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('العميل') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('الإجمالي') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('حالة الدفع') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('طريقة الدفع') }}</th>
                                    <th class="px-4 py-3 text-start font-medium text-gray-600">{{ __('الكاشير') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('التاريخ') }}</th>
                                    <th class="px-4 py-3 text-center font-medium text-gray-600">{{ __('إجراءات') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($salesReceipts as $txn)
                                @php
                                    $statusColors = [
                                        'paid' => 'green',
                                        'partially_paid' => 'amber',
                                        'pending' => 'gray',
                                        'refunded' => 'red',
                                    ];
                                    $statusLabels = [
                                        'paid' => 'مدفوع',
                                        'partially_paid' => 'مدفوع جزئياً',
                                        'pending' => 'معلّق',
                                        'refunded' => 'مسترد',
                                    ];
                                    $paymentStatus = $txn->payment_status->value ?? $txn->payment_status ?? 'pending';
                                    $color = $statusColors[$paymentStatus] ?? 'gray';
                                    $label = $statusLabels[$paymentStatus] ?? $paymentStatus;

                                    $methodLabels = [
                                        'cash' => 'نقدي',
                                        'card' => 'بطاقة',
                                        'wallet' => 'محفظة',
                                        'split' => 'مقسم',
                                        'bank_transfer' => 'تحويل',
                                    ];
                                    $methodValue = $txn->payment_method->value ?? $txn->payment_method ?? '';
                                @endphp
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-mono text-gray-700" dir="ltr">{{ $txn->receipt_number }}</td>
                                    <td class="px-4 py-3 text-gray-800">
                                        {{ $txn->participant?->person?->name_ar ?? __('عميل عابر') }}
                                    </td>
                                    <td class="px-4 py-3 text-center font-medium" dir="ltr">
                                        {{ number_format($txn->total_amount / 100, 2) }} {{ __('ج.م') }}
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs rounded-full bg-{{ $color }}-100 text-{{ $color }}-700">{{ __($label) }}</span>
                                    </td>
                                    <td class="px-4 py-3 text-center text-gray-600">
                                        {{ $methodLabels[$methodValue] ?? $methodValue }}
                                    </td>
                                    <td class="px-4 py-3 text-gray-600 text-xs">{{ $txn->processedBy?->name ?? '-' }}</td>
                                    <td class="px-4 py-3 text-center text-gray-500 text-xs" dir="ltr">
                                        {{ $txn->created_at->format('Y-m-d H:i') }}
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        <a href="{{ route('receipts.pos.print', $txn) }}" target="_blank"
                                           class="text-blue-600 hover:text-blue-800 text-xs font-medium">
                                            {{ __('طباعة') }}
                                        </a>
                                        @if($txn->invoice)
                                        <a href="{{ route('invoices.show', $txn->invoice) }}" wire:navigate
                                           class="text-emerald-600 hover:text-emerald-800 text-xs font-medium ms-2">
                                            {{ __('الفاتورة') }}
                                        </a>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-12">
                        <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                        </svg>
                        <p class="mt-3 text-sm text-gray-500">{{ __('لم يتم بيع هذا المنتج بعد') }}</p>
                    </div>
                @endif
            </div>

            {{-- Analytics Tab --}}
            <div x-show="activeTab === 'analytics'" x-cloak>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    {{-- Total Revenue + Collected --}}
                    <div class="border border-emerald-200 rounded-lg p-5 bg-emerald-50 col-span-1 sm:col-span-2 lg:col-span-1">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-emerald-100 shrink-0">
                                <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <p class="text-xs font-medium text-emerald-700">{{ __('إجمالي الإيرادات') }}</p>
                        </div>

                        {{-- Billed total --}}
                        <p class="text-2xl font-bold text-emerald-800">{{ number_format($totalRevenue / 100, 2) }} <span class="text-sm font-normal text-emerald-600">ج.م</span></p>

                        {{-- Collected sub-line --}}
                        <div class="mt-3">
                            <div class="flex justify-between items-center mb-1">
                                <span class="text-xs text-emerald-700">{{ __('محصّل') }}</span>
                                <span class="text-xs font-semibold text-emerald-800">
                                    {{ number_format($totalCollected / 100, 2) }} ج.م
                                    <span class="text-emerald-600">({{ $collectedPercent }}%)</span>
                                </span>
                            </div>
                            <div class="w-full bg-emerald-200 rounded-full h-2 overflow-hidden">
                                <div class="h-2 rounded-full transition-all duration-500"
                                     style="width: {{ min(100, $collectedPercent) }}%; background-color: #059669;"></div>
                            </div>
                            @if($collectedPercent < 100)
                            <p class="text-xs text-amber-600 mt-1">
                                {{ __('متبقي') }}: {{ number_format(($totalRevenue - $totalCollected) / 100, 2) }} ج.م
                            </p>
                            @endif
                        </div>
                    </div>

                    {{-- Total Sold (units) --}}
                    <div class="border border-gray-200 rounded-lg p-5 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 mb-3">
                            <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                            </svg>
                        </div>
                        <p class="text-xs font-medium text-gray-500 mb-1">{{ __('إجمالي المباع') }}</p>
                        <p class="text-2xl font-bold text-gray-800">{{ number_format($totalSold) }}</p>
                        <p class="text-xs text-gray-400 mt-1">{{ __('وحدة') }}</p>
                    </div>

                    {{-- Total Received (stock-in) --}}
                    <div class="border border-gray-200 rounded-lg p-5 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 mb-3">
                            <svg class="w-6 h-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16l4 4 4-4m-4 4V4m14 0l-4-4-4 4m4-4v16" />
                            </svg>
                        </div>
                        <p class="text-xs font-medium text-gray-500 mb-1">{{ __('إجمالي الوارد') }}</p>
                        <p class="text-2xl font-bold text-gray-800">{{ number_format($totalIn) }}</p>
                        <p class="text-xs text-gray-400 mt-1">{{ __('وحدة') }}</p>
                    </div>

                    {{-- Average Monthly --}}
                    <div class="border border-gray-200 rounded-lg p-5 text-center">
                        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-purple-100 mb-3">
                            <svg class="w-6 h-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                            </svg>
                        </div>
                        <p class="text-xs font-medium text-gray-500 mb-1">{{ __('متوسط الحركة الشهرية') }}</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $avgMonthlyMovement }}</p>
                        <p class="text-xs text-gray-400 mt-1">{{ __('وحدة/شهر') }}</p>
                    </div>
                </div>

                {{-- Stock Turnover Note --}}
                @if($totalSold > 0 && $totalOnHand > 0)
                <div class="mt-6 border border-gray-200 rounded-lg p-5">
                    <h4 class="text-sm font-semibold text-gray-600 mb-2">{{ __('معدل دوران المخزون') }}</h4>
                    <p class="text-sm text-gray-500">
                        {{ __('بناءً على المبيعات الحالية، المخزون المتوفر يكفي لحوالي') }}
                        <span class="font-bold text-gray-800">
                            @php
                                $monthsOfStock = $avgMonthlyMovement > 0 ? round($totalOnHand / $avgMonthlyMovement, 1) : 0;
                            @endphp
                            {{ $monthsOfStock }}
                        </span>
                        {{ __('شهر') }}
                    </p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
