@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-6xl mx-auto">
        <!-- Page Header -->
        <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">{{ $deliveryNote->delivery_note_number }}</p>
                </div>
                <a href="{{ route('delivery-notes.index') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-gray-600 to-gray-700 text-white font-semibold rounded-lg hover:from-gray-700 hover:to-gray-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105">
                    <i class="fas fa-arrow-right ml-2"></i>
                    <span>العودة</span>
                </a>
            </div>

            @if(session('success'))
            <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg">
                <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-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
                <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>

        <!-- Basic Information Section -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 mb-6">
            <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                <h2 class="text-xl font-semibold">معلومات التسليم</h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-black mb-2">رقم السند</label>
                        <p class="text-black font-semibold">{{ $deliveryNote->delivery_note_number }}</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-black mb-2">الحالة</label>
                        <div>
                            @switch($deliveryNote->status)
                                @case('delivered')
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-700">
                                        <i class="fas fa-truck ml-1"></i>
                                        تم التسليم
                                    </span>
                                    @break
                                @case('accepted')
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-700">
                                        <i class="fas fa-check-circle ml-1"></i>
                                        مقبول من العميل
                                    </span>
                                    @break
                                @case('rejected')
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-700">
                                        <i class="fas fa-times-circle ml-1"></i>
                                        مرفوض
                                    </span>
                                    @break
                                @default
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-black">
                                        {{ $deliveryNote->status }}
                                    </span>
                            @endswitch
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-black mb-2">تاريخ التسليم</label>
                        <p class="text-black">{{ $deliveryNote->delivery_date ? $deliveryNote->delivery_date->format('Y-m-d') : 'N/A' }}</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-black mb-2">العميل</label>
                        <p class="text-black">{{ $deliveryNote->customer->name ?? 'N/A' }}</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-black mb-2">المستند المرجعي</label>
                        @if($deliveryNote->salesOrder)
                            <a href="{{ route('sales-orders.show', $deliveryNote->salesOrder) }}" class="text-blue-600 hover:text-blue-700 font-semibold">
                                {{ $deliveryNote->salesOrder->so_number }}
                            </a>
                        @elseif($deliveryNote->salesQuotation)
                            <a href="{{ route('sales-quotations.show', $deliveryNote->salesQuotation) }}" class="text-blue-600 hover:text-blue-700 font-semibold">
                                {{ $deliveryNote->salesQuotation->quotation_number }}
                            </a>
                            <span class="text-xs text-black block mt-1">عرض سعر</span>
                        @else
                            <span class="text-black">-</span>
                        @endif
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-black mb-2">المستودع</label>
                        <p class="text-black">{{ $deliveryNote->warehouse->name ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Items Section -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 mb-6">
            <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                <h2 class="text-xl font-semibold">
                    <i class="fas fa-boxes ml-1"></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-4 py-3 text-right text-sm font-semibold text-black">اسم الصنف</th>
                            <th class="px-4 py-3 text-center text-sm font-semibold text-black">الكمية المطلوبة</th>
                            <th class="px-4 py-3 text-center text-sm font-semibold text-black">الكمية المسلمة</th>
                            <th class="px-4 py-3 text-center text-sm font-semibold text-black">الكمية المقبولة</th>
                            <th class="px-4 py-3 text-center text-sm font-semibold text-black">الكمية المرفوضة</th>
                            <th class="px-4 py-3 text-right text-sm font-semibold text-black">ملاحظات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($deliveryNote->items as $item)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="px-4 py-3 text-right">
                                <div class="font-semibold text-black">{{ $item->item->name ?? 'Unknown' }}</div>
                                <div class="text-xs text-black">{{ $item->unit->name ?? '' }}</div>
                            </td>
                            <td class="px-4 py-3 text-center text-sm text-black font-semibold">
                                {{ number_format($item->quantity_ordered, 2) }}
                            </td>
                            <td class="px-4 py-3 text-center text-sm text-black font-semibold">
                                {{ number_format($item->quantity_delivered, 2) }}
                            </td>
                            <td class="px-4 py-3 text-center text-sm">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-700">
                                    {{ number_format($item->quantity_accepted, 2) }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-center text-sm">
                                @if($item->quantity_rejected > 0)
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-700">
                                    {{ number_format($item->quantity_rejected, 2) }}
                                </span>
                                @else
                                <span class="text-black">-</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-right text-sm text-black">
                                {{ $item->rejection_reason ?? '-' }}
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-black">لا توجد أصناف</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Notes Section -->
        @if($deliveryNote->notes)
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 mb-6">
            <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                <h2 class="text-xl font-semibold">
                    <i class="fas fa-comment-dots ml-1"></i>
                    ملاحظات
                </h2>
            </div>
            <div class="p-6">
                <p class="text-black">{{ $deliveryNote->notes }}</p>
            </div>
        </div>
        @endif

        <!-- Attachment Section -->
        @if($deliveryNote->attachment)
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 mb-6">
            <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                <h2 class="text-xl font-semibold">
                    <i class="fas fa-paperclip ml-1"></i>
                    المرفقات
                </h2>
            </div>
            <div class="p-6">
                <a href="{{ asset('storage/' . $deliveryNote->attachment) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition">
                    <i class="fas fa-download ml-2"></i>
                    <span>تحميل المرفق</span>
                </a>
            </div>
        </div>
        @endif

        <!-- Action Buttons -->
        @if($deliveryNote->status === 'delivered')
        <div class="flex items-center justify-end gap-4 mb-8">
            <form action="{{ route('delivery-notes.accept', $deliveryNote) }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="inline-flex items-center px-6 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition shadow-lg">
                    <i class="fas fa-check ml-2"></i>
                    <span>قبول السند</span>
                </button>
            </form>

            <button type="button" onclick="document.getElementById('rejectModal').classList.remove('hidden')" class="inline-flex items-center px-6 py-3 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition shadow-lg">
                <i class="fas fa-times ml-2"></i>
                <span>رفض السند</span>
            </button>
        </div>
        @endif

        @if($deliveryNote->status === 'accepted')
        <div class="flex items-center justify-end gap-4 mb-8">
            @if($deliveryNote->customerInvoice)
                <a href="{{ route('customer-invoices.show', $deliveryNote->customerInvoice) }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105">
                    <i class="fas fa-external-link-alt ml-2"></i>
                    <span>عرض فاتورة العميل المرتبطة ({{ $deliveryNote->customerInvoice->invoice_number }})</span>
                </a>
            @else
                <a href="{{ route('customer-invoices.create-from-delivery-note', $deliveryNote) }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105">
                    <i class="fas fa-file-invoice-dollar ml-2"></i>
                    <span>إصدار فاتورة عميل</span>
                </a>
            @endif
        </div>
        @endif
    </div>
</div>

<!-- Reject Modal -->
<div id="rejectModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <h3 class="text-lg leading-6 font-medium text-black">رفض سند التسليم</h3>
            <form action="{{ route('delivery-notes.reject', $deliveryNote) }}" method="POST" class="mt-4 text-right">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-black mb-2">سبب الرفض *</label>
                    <textarea name="rejection_reason" required rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="يرجى توضيح سبب الرفض..."></textarea>
                </div>
                <div class="flex justify-end gap-3 mt-5">
                    <button type="button" onclick="document.getElementById('rejectModal').classList.add('hidden')" class="px-4 py-2 bg-gray-200 text-black rounded-lg hover:bg-gray-300 transition">إلغاء</button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">تأكيد الرفض</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection