@extends('layouts.app')

@section('title', 'تفاصيل طلب المبيعات')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-5xl mx-auto">
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">تفاصيل طلب المبيعات</h1>
                    <p class="text-black">{{ $salesRequisition->requisition_number }}</p>
                </div>
                <div class="flex gap-3">
                    <a href="{{ route('sales-requisitions.index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-black bg-white hover:bg-gray-50 focus:outline-none transition-all duration-200">
                        <i class="fas fa-arrow-right ml-2"></i>
                        العودة
                    </a>
                </div>
            </div>

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

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

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
            <!-- Basic Information -->
            <div class="lg:col-span-2 space-y-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
                    <div class="px-6 py-4 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
                        <h2 class="text-xl font-bold text-black">
                            <i class="fas fa-info-circle ml-2 text-blue-500"></i>
                            المعلومات الأساسية
                        </h2>
                        <div>
                            @if($salesRequisition->status == 'draft')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-700 border border-yellow-200">
                                <i class="fas fa-file-alt ml-1"></i>
                                مسودة
                            </span>
                            @elseif($salesRequisition->status == 'approved')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-700 border border-green-200">
                                <i class="fas fa-check-circle ml-1"></i>
                                تمت الموافقة
                            </span>
                            @elseif($salesRequisition->status == 'rejected')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-700 border border-red-200">
                                <i class="fas fa-times-circle ml-1"></i>
                                مرفوض
                            </span>
                            @endif
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div>
                                <label class="block text-sm font-medium text-black mb-1">العميل</label>
                                <p class="text-black font-semibold text-lg">{{ $salesRequisition->customer->name ?? 'غير محدد' }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-black mb-1">مركز التكلفة</label>
                                <p class="text-black font-semibold text-lg">{{ $salesRequisition->costCenter->name ?? 'غير محدد' }}</p>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-black mb-1">وصف الطلب / الغرض</label>
                                <p class="text-black leading-relaxed">{{ $salesRequisition->description }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Items -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
                    <div class="px-6 py-4 bg-gray-50 border-b border-gray-100">
                        <h2 class="text-xl font-bold text-black">
                            <i class="fas fa-list ml-2 text-blue-500"></i>
                            الأصناف المطلوبة
                        </h2>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead class="bg-gray-50 border-b border-gray-200">
                                <tr>
                                    <th class="px-6 py-3 text-right text-xs font-bold text-black uppercase tracking-wider">#</th>
                                    <th class="px-6 py-3 text-right text-xs font-bold text-black uppercase tracking-wider">الصنف</th>
                                    <th class="px-6 py-3 text-right text-xs font-bold text-black uppercase tracking-wider">الكمية</th>
                                    <th class="px-6 py-3 text-right text-xs font-bold text-black uppercase tracking-wider">الوحدة</th>
                                    <th class="px-6 py-3 text-right text-xs font-bold text-black uppercase tracking-wider">السعر المتوقع</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @forelse($salesRequisition->items as $item)
                                <tr class="hover:bg-blue-50 transition-colors duration-150">
                                    <td class="px-6 py-4 text-sm text-black">{{ $loop->iteration }}</td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm font-bold text-black">{{ $item->item->name ?? 'N/A' }}</div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-black font-semibold">{{ number_format($item->quantity, 2) }}</td>
                                    <td class="px-6 py-4 text-sm text-black">{{ $item->unit->name ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 text-sm text-black">
                                        {{ $item->unit_price ? number_format($item->unit_price, 2) : '---' }}
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12 text-center text-black">
                                        <i class="fas fa-box-open block text-4xl mb-4 opacity-20"></i>
                                        لا توجد أصناف في هذا الطلب
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-8">
                <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
                    <h2 class="text-lg font-bold text-black mb-6 flex items-center border-b border-gray-100 pb-4">
                        <i class="fas fa-paperclip ml-2 text-blue-500"></i>
                        المرفقات والملاحظات
                    </h2>
                    
                    <div class="space-y-6">
                        @if($salesRequisition->attachment)
                        <div>
                            <label class="block text-xs font-bold text-black uppercase mb-2">مرفق الطلب</label>
                            <a href="{{ Storage::url($salesRequisition->attachment) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-all duration-200 font-medium w-full justify-center">
                                <i class="fas fa-file-download ml-2"></i>
                                عرض المرفق
                            </a>
                        </div>
                        @endif

                        @if($salesRequisition->notes)
                        <div>
                            <label class="block text-xs font-bold text-black uppercase mb-2">ملاحظات إضافية</label>
                            <div class="p-4 bg-gray-50 rounded-lg border border-gray-100 text-sm text-black italic">
                                {{ $salesRequisition->notes }}
                            </div>
                        </div>
                        @endif

                        @if($salesRequisition->rejection_reason)
                        <div class="p-4 bg-red-50 rounded-lg border border-red-100">
                            <label class="block text-xs font-bold text-red-400 uppercase mb-2">سبب الرفض</label>
                            <div class="text-sm text-red-700">
                                {{ $salesRequisition->rejection_reason }}
                            </div>
                        </div>
                        @endif
                        
                        @if(!$salesRequisition->attachment && !$salesRequisition->notes && !$salesRequisition->rejection_reason)
                        <div class="text-center py-4 text-black">
                            <i class="fas fa-ghost block text-2xl mb-2 opacity-20"></i>
                            لا توجد بيانات إضافية
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Approval/Rejection Actions -->
                @if($salesRequisition->status == 'draft')
                <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
                    <h2 class="text-lg font-bold text-black mb-6 flex items-center border-b border-gray-100 pb-4">
                        <i class="fas fa-check-double ml-2 text-green-500"></i>
                        الإجراءات
                    </h2>
                    <div class="space-y-4">
                        <form action="{{ route('sales-requisitions.approve', $salesRequisition) }}" method="POST">
                            @csrf
                            <button type="submit" class="w-full inline-flex items-center justify-center px-6 py-3 bg-green-600 text-white font-bold rounded-lg hover:bg-green-700 transition-all duration-200 transform hover:-translate-y-0.5 shadow-md">
                                <i class="fas fa-check ml-2"></i>
                                الموافقة على الطلب
                            </button>
                        </form>

                        <button type="button" onclick="document.getElementById('rejectionModal').classList.remove('hidden')" class="w-full inline-flex items-center justify-center px-6 py-3 bg-red-50 text-red-600 font-bold rounded-lg hover:bg-red-100 transition-all duration-200 border border-red-100">
                            <i class="fas fa-times ml-2"></i>
                            رفض الطلب
                        </button>

                        <div class="pt-4 border-t border-gray-100">
                            <a href="{{ route('sales-requisitions.edit', $salesRequisition) }}" class="w-full inline-flex items-center justify-center px-6 py-3 bg-amber-50 text-amber-600 font-bold rounded-lg hover:bg-amber-100 transition-all duration-200 border border-amber-100">
                                <i class="fas fa-edit ml-2"></i>
                                تعديل الطلب
                            </a>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Rejection Modal -->
<div id="rejectionModal" class="fixed inset-0 z-50 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="document.getElementById('rejectionModal').classList.add('hidden')"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-xl text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-gray-100">
            <form action="{{ route('sales-requisitions.reject', $salesRequisition) }}" method="POST">
                @csrf
                <div class="bg-white px-6 pt-6 pb-4 sm:p-8 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-exclamation-triangle text-red-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:mr-4 sm:text-right">
                            <h3 class="text-xl leading-6 font-bold text-black" id="modal-title">رفض طلب المبيعات</h3>
                            <div class="mt-4">
                                <label class="block text-sm font-medium text-black mb-2">سبب الرفض (مطلوب - 10 أحرف على الأقل)</label>
                                <textarea name="rejection_reason" rows="4" class="w-full rounded-lg border-gray-300 focus:ring-red-500 focus:border-red-500" required minlength="10"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-6 py-4 sm:px-8 sm:flex sm:flex-row-reverse">
                    <button type="submit" class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-6 py-2 bg-red-600 text-base font-bold text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:mr-3 sm:w-auto sm:text-sm">
                        تأكيد الرفض
                    </button>
                    <button type="button" onclick="document.getElementById('rejectionModal').classList.add('hidden')" class="mt-3 w-full inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-6 py-2 bg-white text-base font-medium text-black hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:mr-3 sm:w-auto sm:text-sm">
                        إلغاء
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection