<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
            <div>
                <nav class="flex mb-1" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-2 space-x-reverse">
                        <li class="inline-flex items-center">
                            <a href="{{ route('dashboard') }}" class="text-gray-500 hover:text-blue-600 inline-flex items-center text-xs font-medium">
                                <i class="fas fa-home ml-1"></i> {{ __('الرئيسية') }}
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center text-xs text-gray-400">
                                <i class="fas fa-chevron-left mx-1"></i>
                                <a href="{{ route('assets.index') }}" class="text-gray-500 hover:text-blue-600 font-medium">{{ __('الأصول') }}</a>
                            </div>
                        </li>
                        <li aria-current="page">
                            <div class="flex items-center text-xs text-gray-400">
                                <i class="fas fa-chevron-left mx-1"></i>
                                <span class="text-gray-400 font-medium">{{ $asset->name }}</span>
                            </div>
                        </li>
                    </ol>
                </nav>
                <h2 class="font-bold text-xl text-gray-800 leading-tight flex items-center">
                    <i class="fas fa-box-open ml-2 text-blue-600 text-lg"></i>
                    {{ $asset->name }}
                    @if($asset->status == 'active')
                        <span class="mr-2 px-2 py-0.5 text-[10px] font-bold rounded-md bg-green-100 text-green-700 border border-green-200">نشط</span>
                    @elseif($asset->status == 'maintenance')
                        <span class="mr-2 px-2 py-0.5 text-[10px] font-bold rounded-md bg-yellow-100 text-yellow-700 border border-yellow-200">قيد الصيانة</span>
                    @elseif($asset->status == 'disposed')
                        <span class="mr-2 px-2 py-0.5 text-[10px] font-bold rounded-md bg-red-100 text-red-700 border border-red-200">تم التخلص منه</span>
                    @endif
                </h2>
            </div>
            <div class="flex space-x-2 space-x-reverse mt-2 md:mt-0">
                <a href="{{ route('assets.index') }}" class="inline-flex items-center px-3 py-1.5 bg-gray-600 border border-transparent rounded-lg font-bold text-xs text-white hover:bg-gray-700 transition shadow-sm">
                    <i class="fas fa-arrow-right ml-1.5"></i> {{ __('العودة') }}
                </a>
                @can('update', $asset)
                <a href="{{ route('assets.edit', $asset) }}" class="inline-flex items-center px-3 py-1.5 bg-yellow-500 border border-transparent rounded-lg font-bold text-xs text-white hover:bg-yellow-600 transition shadow-sm">
                    <i class="fas fa-edit ml-1.5"></i> {{ __('تعديل') }}
                </a>
                @if($asset->status == 'active')
                <a href="{{ route('assets.disposal.create', $asset) }}" class="inline-flex items-center px-3 py-1.5 bg-red-600 border border-transparent rounded-lg font-bold text-xs text-white hover:bg-red-700 transition shadow-sm">
                    <i class="fas fa-trash-alt ml-1.5"></i> {{ __('تخلص من الأصل') }}
                </a>
                @endif
                @endcan
            </div>
        </div>
    </x-slot>

    <div class="py-3">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            @if(session('success'))
                <div class="bg-green-100 border-r-4 border-green-500 text-green-700 p-3 mb-3 rounded-lg shadow-sm flex items-center text-sm" role="alert">
                    <i class="fas fa-check-circle ml-2 text-lg"></i>
                    <p class="font-bold">{{ session('success') }}</p>
                </div>
            @endif

            <!-- Top Grid: Image + Main Stats -->
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-4">
                <!-- Asset Image -->
                <div class="lg:col-span-1 bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">
                    <div class="p-3 border-b border-gray-50 bg-gray-50/50 flex items-center justify-between">
                        <h3 class="font-bold text-xs text-gray-700 flex items-center">
                            <i class="fas fa-image ml-1.5 text-blue-500"></i> {{ __('صورة الأصل') }}
                        </h3>
                    </div>
                    <div class="flex-grow flex items-center justify-center p-3 bg-gray-50/20">
                        @if($asset->image)
                            <img src="{{ asset('storage/' . $asset->image) }}" alt="{{ $asset->name }}" class="max-h-32 w-auto rounded-lg shadow-sm border border-gray-100">
                        @else
                            <div class="flex flex-col items-center justify-center text-gray-300 py-4">
                                <i class="fas fa-camera text-2xl mb-1"></i>
                                <span class="text-[10px] font-bold">بدون صورة</span>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Financial Stats -->
                <div class="lg:col-span-3 grid grid-cols-2 md:grid-cols-4 gap-3">
                    <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 flex flex-col justify-center relative overflow-hidden">
                        <div class="absolute top-0 right-0 w-1 h-full bg-blue-500"></div>
                        <p class="text-[10px] text-gray-400 font-black uppercase mb-1">تكلفة الشراء</p>
                        <p class="text-lg font-black text-gray-900">{{ number_format($asset->purchase_cost, 2) }} <span class="text-[10px] font-normal text-gray-400">ر.س</span></p>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 flex flex-col justify-center relative overflow-hidden">
                        <div class="absolute top-0 right-0 w-1 h-full bg-red-500"></div>
                        <p class="text-[10px] text-gray-400 font-black uppercase mb-1">الإهلاك المتراكم</p>
                        <p class="text-lg font-black text-red-600">{{ number_format($asset->totalDepreciation, 2) }} <span class="text-[10px] font-normal text-gray-400">ر.س</span></p>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 flex flex-col justify-center relative overflow-hidden">
                        <div class="absolute top-0 right-0 w-1 h-full bg-green-500"></div>
                        <p class="text-[10px] text-gray-400 font-black uppercase mb-1">القيمة الحالية</p>
                        <p class="text-lg font-black text-green-700">{{ number_format($asset->current_value, 2) }} <span class="text-[10px] font-normal text-gray-400">ر.س</span></p>
                    </div>

                    <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100 flex flex-col justify-center relative overflow-hidden">
                        <div class="absolute top-0 right-0 w-1 h-full bg-purple-500"></div>
                        <p class="text-[10px] text-gray-400 font-black uppercase mb-1">تاريخ الشراء</p>
                        <p class="text-base font-black text-gray-800">{{ $asset->purchase_date->format('Y-m-d') }}</p>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                <!-- Detailed Info -->
                <div class="lg:col-span-2 space-y-4">
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-3 border-b border-gray-50 bg-gray-50/50 flex items-center justify-between">
                            <h3 class="font-bold text-gray-800 flex items-center text-sm">
                                <i class="fas fa-info-circle ml-2 text-blue-500"></i> {{ __('المعلومات الأساسية') }}
                            </h3>
                        </div>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-px bg-gray-100">
                            <div class="bg-white p-3">
                                <p class="text-[10px] text-gray-400 font-bold mb-0.5">فئة الأصل</p>
                                <p class="text-xs font-black text-gray-800">{{ $asset->category ? $asset->category->name : '---' }}</p>
                            </div>
                            <div class="bg-white p-3">
                                <p class="text-[10px] text-gray-400 font-bold mb-0.5">المورد</p>
                                <p class="text-xs font-black text-gray-800">{{ $asset->supplier ?: '---' }}</p>
                            </div>
                            <div class="bg-white p-3">
                                <p class="text-[10px] text-gray-400 font-bold mb-0.5">رمز الأصل</p>
                                <p class="text-xs font-black text-blue-600">{{ $asset->asset_code }}</p>
                            </div>
                            <div class="bg-white p-3">
                                <p class="text-[10px] text-gray-400 font-bold mb-0.5">الرقم التسلسلي</p>
                                <p class="text-xs font-bold text-gray-700">{{ $asset->serial_number ?: '---' }}</p>
                            </div>
                            <div class="bg-white p-3">
                                <p class="text-[10px] text-gray-400 font-bold mb-0.5">الموديل</p>
                                <p class="text-xs font-bold text-gray-700">{{ $asset->model ?: '---' }}</p>
                            </div>
                            <div class="bg-white p-3">
                                <p class="text-[10px] text-gray-400 font-bold mb-0.5">الحالة</p>
                                <p class="text-xs font-black {{ $asset->status == 'active' ? 'text-green-600' : 'text-red-600' }}">
                                    {{ $asset->status == 'active' ? 'نشط' : ($asset->status == 'maintenance' ? 'صيانة' : 'مستبعد') }}
                                </p>
                            </div>
                        </div>
                        
                        <div class="p-4 bg-gray-50/30 border-t border-gray-50">
                            <h4 class="text-[10px] font-black text-gray-400 uppercase mb-1">وصف الأصل</h4>
                            <p class="text-xs text-gray-600 leading-relaxed italic">
                                {{ $asset->description ?: 'لا يوجد وصف مسجل.' }}
                            </p>
                        </div>
                    </div>

                    <!-- Depreciation Table (Condensed) -->
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-3 border-b border-gray-50 bg-gray-50/50 flex items-center justify-between">
                            <h3 class="font-bold text-gray-800 flex items-center text-sm">
                                <i class="fas fa-history ml-2 text-blue-500"></i> {{ __('سجل الإهلاك') }}
                            </h3>
                            <span class="text-[10px] font-bold px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full">
                                {{ $asset->depreciations->count() }}
                            </span>
                        </div>
                        <div class="max-h-48 overflow-y-auto">
                            <table class="w-full text-right text-xs">
                                <thead class="bg-gray-50 sticky top-0">
                                    <tr class="text-gray-400 font-black border-b border-gray-100">
                                        <th class="px-4 py-2">التاريخ</th>
                                        <th class="px-4 py-2 text-left">المبلغ</th>
                                        <th class="px-4 py-2 text-left">القيمة المتبقية</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-50">
                                    @forelse($asset->depreciations->sortByDesc('depreciation_date')->take(5) as $depreciation)
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-4 py-2 font-bold text-gray-600">{{ $depreciation->depreciation_date->format('Y-m-d') }}</td>
                                            <td class="px-4 py-2 text-left text-red-500 font-black">{{ number_format($depreciation->depreciation_amount, 2) }}</td>
                                            <td class="px-4 py-2 text-left font-black text-gray-800">{{ number_format($depreciation->book_value, 2) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="px-4 py-4 text-center text-gray-400 italic font-bold">لا يوجد سجلات</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Right Side: Specs & Warranty -->
                <div class="lg:col-span-1 space-y-4">
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
                        <h3 class="font-bold text-xs text-gray-700 mb-3 flex items-center">
                            <i class="fas fa-tools ml-2 text-blue-500"></i> تفاصيل إضافية
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-lg bg-red-50 flex items-center justify-center text-red-500 ml-3 shrink-0">
                                    <i class="fas fa-map-marker-alt text-xs"></i>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[10px] text-gray-400 font-bold leading-tight">الموقع</p>
                                    <p class="text-xs font-black text-gray-800 truncate">{{ $asset->location ?: 'غير محدد' }}</p>
                                </div>
                            </div>
                            <div class="flex items-center border-t border-gray-50 pt-3">
                                <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-500 ml-3 shrink-0">
                                    <i class="fas fa-industry text-xs"></i>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[10px] text-gray-400 font-bold leading-tight">الشركة المصنعة</p>
                                    <p class="text-xs font-black text-gray-800 truncate">{{ $asset->manufacturer ?: '---' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if($asset->warranty_expiry_date)
                    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 relative overflow-hidden">
                        <div class="absolute top-0 right-0 w-1 h-full bg-blue-600"></div>
                        <h4 class="font-bold text-xs text-gray-700 mb-2 flex items-center">
                            <i class="fas fa-shield-alt ml-2 text-blue-600"></i> الضمان
                        </h4>
                        @php $days = round(now()->diffInDays($asset->warranty_expiry_date, false)); @endphp
                        <div class="flex justify-between items-end">
                            <div>
                                <p class="text-xl font-black {{ $days > 0 ? 'text-gray-800' : 'text-red-500' }}">
                                    {{ $days > 0 ? $days : 'منتهي' }}
                                </p>
                                <p class="text-[10px] text-gray-400 font-bold leading-tight">يوم متبقي</p>
                            </div>
                            <div class="text-left">
                                <p class="text-[10px] font-black text-gray-500">{{ $asset->warranty_expiry_date->format('Y-m-d') }}</p>
                                <p class="text-[8px] text-gray-300 font-bold uppercase tracking-tighter">تاريخ الانتهاء</p>
                            </div>
                        </div>
                    </div>
                    @endif

                    @if($asset->notes)
                    <div class="bg-yellow-50 border border-yellow-100 rounded-xl p-3">
                        <h4 class="text-[10px] font-black text-yellow-800 mb-1 flex items-center">
                            <i class="fas fa-sticky-note ml-1"></i> ملاحظات
                        </h4>
                        <p class="text-[11px] text-yellow-700 font-medium leading-tight">{{ $asset->notes }}</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700;800&display=swap');
        body { font-family: 'Almarai', sans-serif; background-color: #f8fafc; }
        .max-w-7xl { max-width: 72rem; }
    </style>
</x-app-layout>
