@extends('layouts.app')

@section('title', 'تفاصيل طلب الشراء الداخلي')

@section('content')
<div class="min-h-screen bg-slate-50 py-6 px-4 md:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Compact Header -->
        <div class="mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-black">تفاصيل طلب الشراء الداخلي</h1>
                <div class="flex items-center gap-2 mt-1">
                    <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs font-bold rounded-md border border-blue-200">{{ $purchaseRequisition->requisition_number }}</span>
                    <p class="text-black text-sm">عرض كافة تفاصيل وحالة طلب الشراء</p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('purchase-requisitions.index') }}" class="inline-flex items-center px-4 py-2 bg-white text-black font-medium rounded-lg hover:bg-gray-50 transition-all duration-200 border border-gray-300 shadow-sm">
                    <i class="fas fa-arrow-right ml-2 text-xs"></i>
                    <span>العودة للمقائمة</span>
                </a>
                @if($purchaseRequisition->status == 'draft')
                <a href="{{ route('purchase-requisitions.edit', $purchaseRequisition) }}" class="inline-flex items-center px-4 py-2 bg-amber-50 text-amber-700 font-medium rounded-lg hover:bg-amber-100 transition-all duration-200 border border-amber-200 shadow-sm">
                    <i class="fas fa-edit ml-2 text-xs"></i>
                    <span>تعديل</span>
                </a>
                @endif
                @if($purchaseRequisition->status == 'approved' && !$purchaseRequisition->purchaseOrder)
                @can('purchasing.requisitions.create')
                <a href="{{ route('purchase-orders.create-from-requisition', $purchaseRequisition) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 transition-all duration-200 border border-blue-700 shadow-sm">
                    <i class="fas fa-file-invoice-dollar ml-2 text-xs"></i>
                    <span>تحويل إلى أمر شراء</span>
                    <i class="fas fa-arrow-left mr-2 text-xs"></i>
                </a>
                @endcan
                @endif
            </div>
        </div>

        @if(session('success'))
        <div class="bg-green-50 border-r-4 border-green-500 p-3 mb-6 rounded-l-lg shadow-sm">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-500"></i>
                </div>
                <div class="mr-3 text-green-700 font-medium text-sm">{{ session('success') }}</div>
            </div>
        </div>
        @endif

        @if(session('error'))
        <div class="bg-red-50 border-r-4 border-red-500 p-3 mb-6 rounded-l-lg shadow-sm">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-500"></i>
                </div>
                <div class="mr-3 text-red-700 font-medium text-sm">{{ session('error') }}</div>
            </div>
        </div>
        @endif

        <!-- Main Layout Grid -->
        <div class="flex flex-col lg:flex-row gap-6 items-start">
            
            <!-- RIGHT SIDE: Main Details (2/3 width) -->
            <div class="w-full lg:w-2/3 space-y-6">
                <!-- Description Card -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-3 bg-gray-50 border-b border-gray-200 flex items-center">
                        <i class="fas fa-file-alt text-blue-600 ml-2"></i>
                        <h2 class="text-base font-bold text-black">وصف وملاحظات الطلب</h2>
                    </div>
                    <div class="p-6 space-y-4">
                        <div>
                            <h3 class="text-[11px] font-bold text-slate-700 uppercase mb-2 tracking-wider">وصف الطلب</h3>
                            <p class="text-slate-900 leading-relaxed text-sm bg-slate-50 p-4 rounded-lg border border-slate-100 italic">
                                {{ $purchaseRequisition->description }}
                            </p>
                        </div>
                        @if($purchaseRequisition->notes)
                        <div class="pt-2">
                            <h3 class="text-[11px] font-bold text-slate-700 uppercase mb-2 tracking-wider">ملاحظات إضافية</h3>
                            <p class="text-slate-800 leading-relaxed text-sm">
                                {{ $purchaseRequisition->notes }}
                            </p>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Items Card -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-3 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
                        <div class="flex items-center">
                            <i class="fas fa-list text-green-600 ml-2"></i>
                            <h2 class="text-base font-bold text-black">الأصناف المطلوبة</h2>
                        </div>
                        <span class="px-2 py-0.5 bg-green-100 text-green-700 text-[10px] font-bold rounded-md border border-green-200">
                            {{ $purchaseRequisition->items->count() }} صنف
                        </span>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-right border-collapse">
                            <thead>
                                <tr class="bg-slate-50 text-slate-700 text-[11px] font-bold uppercase border-b border-slate-200">
                                    <th class="px-4 py-3 w-12 text-center">#</th>
                                    <th class="px-4 py-3 min-w-[200px]">الصنف</th>
                                    <th class="px-4 py-3 w-28 text-center">الكمية</th>
                                    <th class="px-4 py-3 w-28 text-center">الوحدة</th>
                                    <th class="px-4 py-3 w-32">السعر التقديري</th>
                                    <th class="px-4 py-3 w-32">الإجمالي</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 text-sm">
                                @php $grandTotal = 0; @endphp
                                @foreach($purchaseRequisition->items as $item)
                                @php 
                                    $itemTotal = ($item->estimated_unit_price ?? 0) * $item->quantity;
                                    $grandTotal += $itemTotal;
                                @endphp
                                <tr class="hover:bg-gray-50/30 transition-colors">
                                    <td class="px-4 py-3 text-black font-medium text-center text-xs">{{ $loop->iteration }}</td>
                                    <td class="px-4 py-3">
                                        <div class="font-bold text-black">{{ $item->item->name ?? 'N/A' }}</div>
                                        <div class="text-[10px] text-black mt-0.5">{{ $item->costCenter->name ?? 'مركز تكلفة عام' }}</div>
                                    </td>
                                    <td class="px-4 py-3 text-black font-bold text-center">{{ number_format($item->quantity, 2) }}</td>
                                    <td class="px-4 py-3 text-black text-center text-xs">{{ $item->unit->name ?? 'N/A' }}</td>
                                    <td class="px-4 py-3 text-black text-xs">{{ number_format($item->estimated_unit_price ?? 0, 2) }} ر.س</td>
                                    <td class="px-4 py-3 text-blue-600 font-bold text-xs">{{ number_format($itemTotal, 2) }} ر.س</td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="bg-gray-50 font-bold border-t-2 border-gray-100">
                                    <td colspan="5" class="px-4 py-4 text-left text-black text-sm">إجمالي القيمة التقديرية للطلب:</td>
                                    <td class="px-4 py-4 text-blue-700 text-base font-black">{{ number_format($grandTotal, 2) }} ر.س</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>

            <!-- LEFT SIDE: Sidebar (1/3 width) -->
            <div class="w-full lg:w-1/3 space-y-6">
                <!-- Status Card -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-3 bg-gray-50 border-b border-gray-200 flex items-center">
                        <i class="fas fa-shield-alt text-amber-600 ml-2"></i>
                        <h2 class="text-base font-bold text-black">حالة الطلب</h2>
                    </div>
                    <div class="p-6 flex flex-col items-center text-center">
                        @if($purchaseRequisition->status == 'draft')
                        <div class="w-16 h-16 bg-yellow-50 text-yellow-500 rounded-full flex items-center justify-center mb-3 border-2 border-yellow-100">
                            <i class="fas fa-file-alt text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-black text-yellow-700 uppercase mb-1">مسودة</h3>
                        <p class="text-[11px] text-black mb-4">بانتظار الموافقة أو الإرسال للموردين</p>
                        @elseif($purchaseRequisition->status == 'approved')
                        <div class="w-16 h-16 bg-green-50 text-green-500 rounded-full flex items-center justify-center mb-3 border-2 border-green-100">
                            <i class="fas fa-check-circle text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-black text-green-700 uppercase mb-1">تمت الموافقة</h3>
                        <p class="text-[11px] text-black mb-4">بواسطة {{ $purchaseRequisition->approver->name ?? 'النظام' }}</p>
                        @elseif(in_array($purchaseRequisition->status, ['pending', 'in_progress', 'processing']))
                        <div class="w-16 h-16 bg-blue-50 text-blue-500 rounded-full flex items-center justify-center mb-3 border-2 border-blue-100">
                            <i class="fas fa-spinner text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-black text-blue-700 uppercase mb-1">قيد التنفيذ</h3>
                        @if($purchaseRequisition->purchaseOrder)
                            <p class="text-[12px] text-black mb-1 font-bold">{{ $purchaseRequisition->purchaseOrder->po_number }}</p>
                            <p class="text-[11px] text-black mb-2">{{ $purchaseRequisition->purchaseOrder->created_at->format('Y-m-d') }}</p>
                        @else
                            <p class="text-[11px] text-black mb-4">جاري تجهيز أمر الشراء</p>
                        @endif
                        @elseif($purchaseRequisition->status == 'rejected')
                        <div class="w-16 h-16 bg-red-50 text-red-500 rounded-full flex items-center justify-center mb-3 border-2 border-red-100">
                            <i class="fas fa-times-circle text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-black text-red-700 uppercase mb-1">مرفوض</h3>
                        <p class="text-[11px] text-black mb-4">تم رفض هذا الطلب من قبل الإدارة</p>
                        @else
                        <div class="w-16 h-16 bg-gray-50 text-black rounded-full flex items-center justify-center mb-3 border-2 border-gray-100">
                            <i class="fas fa-info-circle text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-black text-black uppercase mb-1">{{ $purchaseRequisition->status }}</h3>
                        @endif

                        <div class="w-full mt-2 pt-5 border-t border-gray-100 space-y-4">
                            <div class="flex items-center justify-between text-xs">
                                <span class="text-slate-600 font-bold uppercase tracking-wider">رقم المرجع:</span>
                                <span class="text-slate-900 font-black bg-slate-100 px-2 py-0.5 rounded">{{ $purchaseRequisition->requisition_number }}</span>
                            </div>
                            <div class="flex items-center justify-between text-xs">
                                <span class="text-slate-600 font-bold uppercase tracking-wider">تاريخ الطلب:</span>
                                <span class="text-slate-800 font-medium">{{ $purchaseRequisition->created_at->format('Y-m-d') }}</span>
                            </div>
                            <div class="flex items-center justify-between text-xs">
                                <span class="text-slate-600 font-bold uppercase tracking-wider">مركز التكلفة:</span>
                                <span class="text-blue-700 font-black">{{ $purchaseRequisition->costCenter->name ?? 'عام' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Admin Actions Box -->
                @if($purchaseRequisition->status == 'draft')
                <div class="bg-slate-800 rounded-xl shadow-lg p-6 text-white overflow-hidden relative">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-blue-500/10 rounded-full -mr-10 -mt-10 blur-2xl"></div>
                    <h3 class="font-bold text-sm mb-5 flex items-center relative z-10">
                        <i class="fas fa-bolt ml-2 text-blue-400"></i>
                        إجراءات سريعة
                    </h3>
                    <div class="grid grid-cols-1 gap-3 relative z-10">
                        @can('purchasing.requisitions.approve')
                        <form action="{{ route('purchase-requisitions.approve', $purchaseRequisition) }}" method="POST" class="w-full">
                            @csrf
                            <button type="submit" class="w-full py-2.5 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-bold transition-all shadow-md flex items-center justify-center gap-2 border border-green-500/50">
                                <i class="fas fa-check-circle text-xs"></i>
                                اعتماد الطلب
                            </button>
                        </form>
                        @endcan

                        @can('purchasing.requisitions.reject')
                        <button type="button" class="w-full py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-bold transition-all flex items-center justify-center gap-2 border border-red-500" onclick="document.getElementById('rejectModal').showModal()">
                            <i class="fas fa-times-circle text-xs"></i>
                            رفض الطلب
                        </button>
                        @endcan

                        @can('purchasing.requisitions.delete')
                        <form action="{{ route('purchase-requisitions.destroy', $purchaseRequisition) }}" method="POST" class="w-full mt-1">
                            @csrf
                            @method('DELETE')
                            <button type="submit" style="width:100%;padding:8px 0;background-color:#475569;color:#f1f5f9;border:1px solid #64748b;border-radius:8px;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;" onmouseover="this.style.backgroundColor='#64748b'" onmouseout="this.style.backgroundColor='#475569'" onclick="return confirm('هل أنت متأكد من حذف هذا الطلب نهائياً؟')">
                                <i class="fas fa-trash" style="font-size:10px;"></i>
                                حذف الطلب بالكامل
                            </button>
                        </form>
                        @endcan
                    </div>
                </div>
                @elseif($purchaseRequisition->status == 'approved' && !$purchaseRequisition->purchaseOrder)
                <div class="bg-slate-800 rounded-xl shadow-lg p-6 text-white overflow-hidden relative">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-blue-500/10 rounded-full -mr-10 -mt-10 blur-2xl"></div>
                    <h3 class="font-bold text-sm mb-5 flex items-center relative z-10">
                        <i class="fas fa-bolt ml-2 text-blue-400"></i>
                        إجراءات سريعة
                    </h3>
                    <div class="grid grid-cols-1 gap-3 relative z-10">
                        @can('purchasing.requisitions.create')
                        <a href="{{ route('purchase-orders.create-from-requisition', $purchaseRequisition) }}" class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-bold transition-all shadow-md flex items-center justify-center gap-2 border border-blue-500/50">
                            <i class="fas fa-file-invoice-dollar text-xs"></i>
                            <span>تحويل إلى أمر شراء</span>
                            <i class="fas fa-arrow-left text-xs"></i>
                        </a>
                        @endcan
                    </div>
                </div>
                @endif

                <!-- Attachment Box -->
                @if($purchaseRequisition->attachment)
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-5 py-3 bg-gray-50 border-b border-gray-200 flex items-center">
                        <i class="fas fa-paperclip text-black ml-2"></i>
                        <h2 class="text-base font-bold text-black text-sm">المرفقات</h2>
                    </div>
                    <div class="p-4">
                        <a href="{{ asset('storage/' . $purchaseRequisition->attachment) }}" target="_blank" class="flex items-center p-3 bg-blue-50/50 hover:bg-blue-100/50 rounded-lg border border-blue-100 transition-all group">
                            <div class="w-10 h-10 bg-white text-blue-600 rounded-md shadow-sm flex items-center justify-center ml-3 border border-blue-50">
                                <i class="fas fa-file-pdf text-lg"></i>
                            </div>
                            <div class="flex-1 overflow-hidden">
                                <p class="text-xs font-black text-black truncate">عرض المستند المرفق</p>
                                <p class="text-[10px] text-black mt-0.5">انقر للمعاينة أو التحميل</p>
                            </div>
                            <i class="fas fa-external-link-alt text-xs text-black group-hover:text-blue-500 transition-colors"></i>
                        </a>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Bottom Action Bar: View Related Purchase Order -->
        @if($purchaseRequisition->purchaseOrder)
        <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-5 flex flex-col md:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-green-100 text-green-700 rounded-full flex items-center justify-center border-2 border-green-200 shrink-0">
                        <i class="fas fa-file-invoice-dollar text-lg"></i>
                    </div>
                    <div class="text-right">
                        <h3 class="text-base font-bold text-black">أمر الشراء المرتبط</h3>
                        <p class="text-xs text-black mt-1">
                            رقم أمر الشراء:
                            <span class="font-bold text-green-700">{{ $purchaseRequisition->purchaseOrder->po_number }}</span>
                            <span class="mx-1">|</span>
                            <span>بتاريخ:</span>
                            <span class="font-bold text-black">{{ $purchaseRequisition->purchaseOrder->created_at->format('Y-m-d') }}</span>
                        </p>
                    </div>
                </div>
                <a href="{{ route('purchase-orders.show', $purchaseRequisition->purchaseOrder) }}" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-bold rounded-lg shadow-md transition-all border border-green-700 text-sm">
                    <i class="fas fa-external-link-alt text-xs"></i>
                    <span>عرض أمر الشراء المرتبط</span>
                    <i class="fas fa-arrow-left text-xs"></i>
                </a>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection